在 Ionic 3 上录制和播放音频答案

【问题标题】：Recording and playing back audio on Ionic 3在 Ionic 3 上录制和播放音频
【发布时间】：2017-12-26 15:43:18
【问题描述】：

我在 iOS 上遇到了一个奇怪的问题。

我正在使用 Ionic Native Media 插件录制音频并尝试使用 HTML5 Web 音频 API（WavesurferJS 或 HowlerJS）播放录音。在我录制音频后，如果我尝试立即播放录音，音频将不会播放，但如果我关闭应用然后重新打开它，音频会正常播放。

HowlerJS 抛出的错误是“错误解码音频”。我的想法是 Native Media 插件没有完全释放文件，因此没有授予 HowlerJS 读取音频数据的权限。

感谢任何想法或方向。

【问题讨论】：

你找到解决办法了吗？

标签： javascript ios ionic-framework ionic3

【解决方案1】：

使用 Cordova 插件媒体：

$ ionic cordova plugin add cordova-plugin-media
$ npm install --save @ionic-native/media

来自 ionic doc 的有用文章：

https://ionicframework.com/docs/native/media/

【讨论】：

【解决方案2】：

https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/media/index.ts - 提到cmets中的东西..

 * Some hints if you are using iOS and recording doesn't work:
 * 1.) Try to use a absolute file path but remove beginning "file://".
 * Then it looks like: `/var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a`
 * Example: `this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a')`
 * 2.) If that's not working, too, create the file before using.
 * Example:
 * ```typescript
 * import { Media, MediaObject } from '@ionic-native/media';
 * import { File } from '@ionic-native/file';
 *
 * ...
 *
 * constructor(private media: Media, private file: File) { }
 *
 * ...
 *
 * this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => {
 *   let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a');
 *   file.startRecord();
 *   window.setTimeout(() => file.stopRecord(), 10000);
 * });
 * ```
 *
 * You can find the reasons here: https://github.com/ionic-team/ionic-native/issues/1452#issuecomment-299605906
 * @classes
 * MediaObject
 * @interfaces
 * MediaError
 */

【讨论】：