CODEWITHSUNDEEP
ioscordovaionic-frameworkionic2cordova-plugins
Ivan Lencina
Ivan Lencina

Reputation: 1785

Ionic 2 Cannot use audio file from resource on IOS Emulator

I have an Ionic 2 app that works fine on Android. Now I need to build the IOS version. The app can stream and download audios from SoundCloud.

When the users click to download an audio, the audio is stored in the app's data directory provided by Cordova file plugin.

The logic I use to store and retrieve data does not matter because in Android it works. The problem is that I want to recover and play the audio in IOS.

This is the part of code where I create a MediaObject and later play, pause it:

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);

In the Media plugin docs says if still having problems on IOS, first create the file. So I tried, but I still having the same problem:

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);
});

In console I get these logs:

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'

Maybe It's happening on Emulator but will not happen on a real device? I can't test on iPhone because I haven't got one :/

PD: A curious fact is that the SoundCloud api returns a redirect when making a GET to its api to download an audio. The response has a status of 301, so I use the response.headers.Location to handle the redirect and there, I can perform the download. And I'm noticing that in IOS it never performs the redirect, it goes directly on the 'positive' way and the console says 'downloaded'. Maybe it's never really downloaded...

Upvotes: 4

Views: 801

Answers (1)

Bashar Altakrouri
Bashar Altakrouri

Reputation: 10595

You need indeed to create a file before creating the recorder media object. Recordings are possible even with the emulator on iOS and Android. The following illustrate how this is done with Ionic2+

First you need to import the following

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

Make sure that you injected the imports in your constructor as follows

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

Declare the required variables before the constructor as follows

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

The code for starting the recording in as follows

 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();
    });
  }
}

Notice the differences between using the path name "this.filePath" in createFile and media.create.

The code for stopping the recording is as follows

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

Upvotes: 1

Related Questions