MediaManager isn't getting the correct duration #42
Comments
|
Is your audio in MP3 format? I am also pulling audio from AWS and works fine on my end. |
|
This is my enviroment: Cordova CLI: 6.0.0 And my plugins: com.phonegap.plugins.facebookconnect 1.0.1.1 "Facebook" What is your version of Media and Angular? Maybe there is a problem with my environment? |
|
I am using cordova-plugin-media 2.2.0 with ionic 1.2.4. But I am on Android so I am not sure about iOS, i know it works for other users but there may be some issues depending on your plugin versions. |
|
I updated and still no luck. It looks like this is actually an issue with the media plugin because that is where the duration comes from. |
|
Can you try this? |
|
No dice. So the application that we've built records audio and then pushes it to a server. The server converts it to mp3 and then through the app they have the ability to listen to it. We also have a webapp that does the same thing. All data is accessible on web or mobile. The files created by the web do not have this issue (they are originally mp3 files). The files generated by the app is m4v. I'm wondering if there is something going on with the conversion process. I'm not sure how cordova-plugin-media figures out the duration. Any ideas? |
|
The cordova-plugin-media sucks at that, it has many issues with audio position and duration. The audio duration is not reported immediately as the audio starts playing but it needs a few cycles until the plugin can read the duration -if it can at all, it seems to fail for some audio formats. So you are dealing with m4v files, I have no experience with that format so I cannot tell. The latest plugin version claims to have solved these issues but I am not so sure. I am working on the next version of ionic-audio which will support the new Web Audio API in addition to the media plugin. |
|
I've been looking into this issue for a while, and I agree with @arielfaur. It appears that it takes a short while for the plugin to be able to read the duration of the audio file, after the file starts playing. So, to come up with a work around, you need to:
Below is a sample sample function I just created to tackle the issue: getDurationAndSetToPlay() {
this.curr_playing_file = this.media.create(this.file.externalDataDirectory + "hotel_california.mp3");
this.curr_playing_file.play();
this.curr_playing_file.setVolume(0.0); // you don't want users to notice that you are playing the file
let self = this;
this.interval = setInterval(function() {
if(self.duration == -1) {
self.duration = self.curr_playing_file.getDuration();
} else {
self.curr_playing_file.stop();
self.curr_playing_file.release();
self.setRecordingToPlay();
clearInterval(self.interval);
}
}, 100);
}The complete
<ion-header>
<ion-navbar color="primary">
<ion-title>
<ion-icon name="musical-note"></ion-icon>
{{ filename }}
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!-- Playback section -->
<ion-card padding text-center>
<h1>Playback</h1>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col>
<button ion-button color="primary" [disabled]="!is_ready">
<ion-icon name="skip-backward"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button (click)="playRecording()" color="primary" *ngIf="!is_playing" [disabled]="!is_ready">
<ion-icon name="play"></ion-icon>
</button>
<button ion-button (click)="pausePlayRecording()" color="secondary" *ngIf="is_playing" [disabled]="!is_ready">
<ion-icon name="pause"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button color="primary" [disabled]="!is_ready">
<ion-icon name="skip-forward"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<!-- <button ion-button (click)="stopPlayRecording()" color="danger">
<ion-icon name="square"></ion-icon>
</button> -->
</ion-card-content>
</ion-card>
<p>Duration: {{ duration }}</p>
{{ message }}
</ion-content>
import { Component } from '@angular/core';
import { Platform, NavController, NavParams } from 'ionic-angular';
import { Media, MediaObject } from '@ionic-native/media';
import { File } from '@ionic-native/file';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class AudioDetail {
filename: any;
curr_playing_file: MediaObject;
is_playing: boolean = false;
is_ready: boolean = false;
message: any;
duration: any = -1;
position: any;
interval: any;
constructor(
public platform: Platform,
public navCtrl: NavController,
public navParams: NavParams,
private file: File,
private transfer: FileTransfer,
private media: Media) {
// this.item = navParams.get('file');
this.filename = "Hotel California";
let url = "http://fabienne.sigonney.free.fr/tranquilit%E9/Eagles%20-%20Hotel%20California%20(Acoustic).mp3";
this.platform.ready().then(() => {
this.file.resolveDirectoryUrl(this.file.externalDataDirectory).then((resolvedDirectory) => {
// inspired by: https://github.com/ionic-team/ionic-native/issues/1711
console.log("resolved directory: " + resolvedDirectory.nativeURL);
this.file.checkFile(resolvedDirectory.nativeURL, "hotel_california.mp3").then((data) => {
if(data == true) { // exist
this.getDurationAndSetToPlay();
} else { // not sure if File plugin will return false. go to download
console.log("not found!");
throw {code: 1, message: "NOT_FOUND_ERR"};
}
}).catch(err => {
console.log("Error occurred while checking local files:");
console.log(err);
if(err.code == 1) {
// not found! download!
console.log("not found! download!");
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(url, this.file.externalDataDirectory + "hotel_california.mp3").then((entry) => {
console.log('download complete' + entry.toURL());
this.getDurationAndSetToPlay();
}).catch(err_2 => {
console.log("Download error!");
console.log(err_2);
});
}
});
});
});
}
getDurationAndSetToPlay() {
this.curr_playing_file = this.media.create(this.file.externalDataDirectory + "hotel_california.mp3");
this.curr_playing_file.play();
this.curr_playing_file.setVolume(0.0); // you don't want users to hear that you are playing the file
let self = this;
this.interval = setInterval(function() {
if(self.duration == -1) {
self.duration = self.curr_playing_file.getDuration();
} else {
self.curr_playing_file.stop();
self.curr_playing_file.release();
self.setRecordingToPlay();
clearInterval(self.interval);
}
}, 100);
}
setRecordingToPlay() {
this.curr_playing_file = this.media.create(this.file.externalDataDirectory + "hotel_california.mp3");
console.log("audio file set");
this.message = "audio file set";
this.is_ready = true;
}
playRecording() {
this.curr_playing_file.play();
this.is_playing = true;
}
pausePlayRecording() {
this.is_playing = false;
this.curr_playing_file.pause();
}
stopPlayRecording() {
this.is_playing = false;
this.curr_playing_file.stop();
this.curr_playing_file.release();
}
} |
We are pulling audio from AWS and it appears that it always has the incorrect duration. The current position will go above the total duration. Any ideas what is going on?
The text was updated successfully, but these errors were encountered: