首页 文章

Ionic 2 无法在 IOS 仿真器上使用来自资源的音频文件

提问于
浏览
4

我有一个在 Android 上运行良好的 Ionic 2 应用程序。现在我需要构建 IOS 版本。该应用程序可以从 SoundCloud 流式传输和下载音频。

当用户单击下载音频时,音频存储在Cordova file plugin提供的应用程序的数据目录中。

我用来存储和检索数据的逻辑并不重要,因为在 Android 中它可以工作。问题是我想在 IOS 中恢复和播放音频。

这是我创建MediaObject以及稍后播放的代码的一部分,暂停它:

var pathalone: string = '';

if (this.platform.is('ios')) {
    pathalone = this.audio.filePath.replace(/^file:\/\//, '');
    console.log("Pathalone: " + pathalone);
    this.mediaPlayer = this.media.create(pathalone, onStatusUpdate, onSuccess, onError);
} else {
    pathalone = this.audio.filePath.substring(8);
    this.mediaPlayer = this.media.create(pathalone, onStatusUpdate, onSuccess, onError);
}

setTimeout(() => {
    if (this.mediaPlayer) {
        this.togglePlayPause();
        this.updateTrackTime();
    }
}, 1000);

媒体插件文档中表示如果在 IOS 上仍有问题,请先创建该文件。所以我尝试过,但我仍然遇到同样的问题:

this.file.createFile(cordova.file.dataDirectory, this.audio.fileName, true).then(() => {
    pathalone = this.audio.filePath.replace(/^file:\/\//, '');
    console.log("Pathalone: " + pathalone);
    this.mediaPlayer = this.media.create(pathalone, onStatusUpdate, onSuccess, onError);
});

在控制台中我得到这些日志:

console.log: Pathalone: 
            /Users/ivan/Library/Developer/CoreSimulator/Devices/0D75C1A9-591A-4112-BBE4-AB901953A38F/data/Containers/Data/Application/509D1136-86F6-4C9B-84B5-8E0D0D203DAC/Library/NoCloud/311409823.mp3
[14:07:48]  console.log: Cannot use audio file from resource 
            '/Users/ivan/Library/Developer/CoreSimulator/Devices/0D75C1A9-591A-4112-BBE4-AB901953A38F/data/Containers/Data/Application/509D1136-86F6-4C9B-84B5-8E0D0D203DAC/Library/NoCloud/311409823.mp3'

也许它发生在模拟器上但不会发生在真实的设备上?我无法在 iPhone 上测试因为我没有一个:/

**PD:**一个奇怪的事实是,当对其 api 进行 GET 下载音频时,SoundCloud api 会返回重定向。响应的状态为 301,因此我使用response.headers.Location来处理重定向,然后我可以执行下载。而且我注意到在 IOS 中它从不执行重定向,它直接采用'正面'方式,控制台说'下载'。也许它从未真正下载过......

1 回答

  • 1

    在创建记录器媒体对象之前,您确实需要创建一个文件。即使在 iOS 和 Android 上使用模拟器也可以进行录制。以下说明如何使用 Ionic2 完成此操作

    首先,您需要导入以下内容

    import { NavController, Platform } from 'ionic-angular';
    import { Media, MediaObject } from '@ionic-native/media';
    import { File } from '@ionic-native/file';
    

    确保在构造函数中注入了导入,如下所示

    constructor(public navCtrl: NavController, private media: Media, private file: File, public platform: Platform) {
    // some more code here
    }
    

    在构造函数之前声明所需的变量,如下所示

    filePath: string;
    fileName: string;
    audio: MediaObject;
    

    开始录制的代码如下

    startRecord() {
      if (this.platform.is('ios')) {
        this.fileName = 'record' + new Date().getDate() + new Date().getMonth() + new Date().getFullYear() + new Date().getHours() + new Date().getMinutes() + new Date().getSeconds() + '.3gp';
        this.filePath = this.file.dataDirectory;
        this.file.createFile(this.filePath, this.fileName, true).then(() => {
          this.audio = this.media.create(this.filePath.replace(/^file:\/\//, '') + this.fileName);
          this.audio.startRecord();
        });
      } else if (this.platform.is('android')) {
        this.fileName = 'record' + new Date().getDate() + new Date().getMonth() + new Date().getFullYear() + new Date().getHours() + new Date().getMinutes() + new Date().getSeconds() + '.3gp';
        this.filePath = this.file.externalDataDirectory;
        this.file.createFile(this.filePath, this.fileName, true).then(() => {
          this.audio = this.media.create(this.filePath.replace(/^file:\/\//, '') + this.fileName);
          this.audio.startRecord();
        });
      }
    }
    

    注意在createFilemedia.create中使用路径名“this.filePath”之间的区别。

    停止录制的代码如下

    stopRecord() {
        this.audio.stopRecord();
      }
    

相关问题