Comments (8)
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.
from ionic-audio.
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:
- play the file
- set the volume to 0
- constantly check for duration until you get it.
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 .html
and .ts
are shown below:
home.html
:
<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>
home.ts
:
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();
}
}
from ionic-audio.
Is your audio in MP3 format? I am also pulling audio from AWS and works fine on my end.
from ionic-audio.
This is my enviroment:
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Version: 1.2.4-nightly-1917
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: Not installed
ios-sim version: 4.1.1
OS: Mac OS X El Capitan
Node Version: v0.10.32
Xcode version: Xcode 7.2 Build version 7C68
And my plugins:
com.phonegap.plugins.facebookconnect 1.0.1.1 "Facebook"
com.pushwoosh.plugins.pushwoosh 4.2.0 "Pushwoosh"
cordova-plugin-audio-recorder-api 0.0.1 "AudioRecorderAPI"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.1 "Device"
cordova-plugin-dialogs 1.2.0 "Notification"
cordova-plugin-file 4.1.1 "File"
cordova-plugin-insomnia 4.2.0 "Insomnia (prevent screen sleep)"
cordova-plugin-media 2.0.0 "Media"
cordova-plugin-network-information 1.2.0 "Network Information"
cordova-plugin-nowplaying 1.0.0 "NowPlaying"
cordova-plugin-remotecommand 1.0.0 "RemoteCommand"
cordova-plugin-splashscreen 3.1.0 "Splashscreen"
cordova-plugin-statusbar 2.1.1 "StatusBar"
cordova-plugin-transport-security 0.1.1 "App Transport Security"
cordova-plugin-whitelist 1.2.1 "Whitelist"
cordova-plugin-x-socialsharing 5.0.10 "SocialSharing"
cordova-sqlite-storage 0.8.4-dev "Cordova sqlite storage plugin (core version)"
ionic-plugin-keyboard 1.0.8 "Keyboard"
What is your version of Media and Angular? Maybe there is a problem with my environment?
from ionic-audio.
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.
from ionic-audio.
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.
from ionic-audio.
Can you try this?
cordova plugin rm cordova-plugin-media
cordova plugin add [email protected]
from ionic-audio.
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?
from ionic-audio.
Related Issues (20)
- Adjust speed of playing track HOT 2
- Structure of this._audioProvider.tracks duration seeking
- problem in play
- I have an error when it comes to template parsing errors.
- Customize UI of the provided html tags
- How can I post all of the tracks playing at the same time?
- Want to stop any audio properly
- Not able to Play M3u Files . HOT 1
- on iOS lock screen, I can't play the audio
- Ionic 4 version? HOT 10
- Are there any way to have two audioProvider?
- I can't change the progress if the file is saved under assets/
- it doesn't work with local audio files, HOT 1
- preload metadata is not preloading tracks with local files - It works only on streaming HOT 1
- online audio file not working on device
- onFinish called while playing
- Cannot properly handle ExpressionChangedAfterItHasBeenCheckedError
- AudioProvider replace function
- Change volume
- ERROR in Error during template compile of 'IonicAudioModule'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-audio.