Ionic 2 无法使用 IOS 模拟器上资源中的音频文件

Posted 2023-03-15

【中文标题】Ionic 2 无法使用 IOS 模拟器上资源中的音频文件

【英文标题】：Ionic 2 Cannot use audio file from resource on IOS Emulator

【发布时间】：2017-06-07 17:36:08

【问题描述】：

我有一个在 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);

Media plugin docs中说如果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 上进行测试，因为我没有：/

警察局： 一个奇怪的事实是，SoundCloud api 在对其 api 进行 GET 以下载音频时返回重定向。 响应的状态为 301，所以我使用 response.headers.Location 来处理重定向，在那里我可以执行下载。 而且我注意到在 IOS 中它从不执行重定向，它直接以“积极”方式进行，并且控制台显示“已下载”。也许它从未真正下载过......

【参考方案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();
    );
  

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

停止录制的代码如下

  stopRecord() 
    this.audio.stopRecord();