arielfaur/ionic-audio

An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.

ionic-audio

This repo is for Ionic 1 and is no longer maintained.

For the Ionic 3 / Angular 4 version visit: https://github.com/arielfaur/ionic-audio/tree/3.0

ionic-audio's Issues

Play Audio in background

Hey,
I was wondering if there is a way to have the audio play when the app is minimized or the screen is locked.

I found for the cordova media plugin you can pass a parameter to the play function like below:
var iOSPlayOptions = {
numberOfLoops: 1,
playAudioWhenScreenIsLocked: true
}
currentMedia.play(iOSPlayOptions);

But this doesn't seem to be working with this plugin. Any thoughts?

Thanks, this plugin is awesome!

'onSeek' method ?

Is it possible to add callback when the user slide the seekbar (e.g onSeekStart, onSeekChange, onSeekEnd,...). I want to retrieve the current track's position. Thks !

Parse error when building

After modifying the gulp file with:

`gulp.task('watch', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
gulpWatch('app//*.scss', function(){ gulp.start('sass'); });
gulpWatch('app//*.html', function(){ gulp.start('html'); });
buildBrowserify({
watch: true,
src: ['./app/app.js', './node_modules/ionic-audio/dist/ionic-audio.ts', './node_modules/ionic-audio/typings/main.d.ts']
}).on('end', done);
}
);
});

gulp.task('build', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
buildBrowserify({
minify: isRelease,
browserifyOptions: {
debug: !isRelease
},
uglifyOptions: {
mangle: false
},
src: ['./app/app.js', './node_modules/ionic-audio/dist/ionic-audio.ts', './node_modules/ionic-audio/typings/main.d.ts']
}).on('end', done);
}
);
});
`

I'm getting this parse error:

...node_modules/ionic-audio/dist/ionic-audio.ts:8 export * from './ionic-audio-interfaces'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Plugin should use a background thread warning

Geting this warning in Xcode
THREAD WARNING: ['Media'] took '11719.759033' ms. Plugin should use a background thread.

allow stop playing when close ionic modal

how i can stop playing audio when i close ionic modal
i have hook when close modal but i can't access to audio stop function who i can do this ?

and thank you

Test On Android 4.1.2 fails. The track Does not play.

Is there any work around? I have serach n number of ways. But audio does not play on android 4.1.2

Its not working in Android

I can't Skip a song using the slide, nor the loading symbol disappears... And after the song is played it won't stop anymore. Any solutions?

Uncaught TypeError: Object #<Object> has no method 'play' on Android

I had the plugin working previously with an older version of cordova but since updating to the latest, I get this error while running on an Android device:

Uncaught TypeError: Object #<Object> has no method 'play' 

My usage case follows the same as the example on the ionic audio website. When I tap the play button I see the loading spinner but get the above error in console.

The media plugin is installed and the code has not changed since I had it working. The only thing I changed was I updated cordova which meant I had to create a new project but I copied everything from the www folder and readded the plugins.

I had a nightmare getting videos to play on Android in the same App so I had to use the file and file-transfer plugins to access the video files. Could this be a similar problem?

Bower main property

Hi,

Can you please add "main" : "dist/ion-audio.js" in bower.json ?

It would enable wiredep to automatically add ionic-audio dependencies to the index.html.

Thanks

Error in Success callbackId facing issue ios

Hi I am facing this error,
in my project in one page I am getting all audio list dynamically and next page with controller
calling the audio like this
$scope.track = $rootScope.songsObject[$stateParams.id];
and the audio is playing well no issue I am going back again getting the list of audio's and again selected another one its working but same after 3 to 4 audio's just the spinner is rotating no errors in Xcode also and nothing is working I have youtube videos also they are also not working at that time I think in background some thing is happening and some times i am getting this error in Xcode
Error in Success callbackId: Media1035323214 : TypeError: 'undefined' is not an object (evaluating 'currentTrack.progress = position')
please help me

ReferenceError: Can't find variable: nan

I am trying to test the example app but I am getting the following error:

exeption nativeEvalAndFetch : ReferenceError: Can't find variable: nan

and the music is not playing.

H

Dynamic track loading?

Hello, first of all, a huge thanks for this awesome project.

I currently have an ionic-audio code block embedded in my footer like so.

<ion-audio-track track="myTrack">
  <ion-audio-controls>
    <a class="button button-icon icon" ion-audio-play></a>
    <ion-spinner icon="ios"></ion-spinner>
  </ion-audio-controls>
</ion-audio-track>

In my controller, $scope.myTrack is dynamically loaded. Whenever an event fires (ionic slide changed), it triggers the following function:

$scope.slideChanged = function(index) {
  $scope.slideIndex = index;
  var newAudio = $scope.data[index]

  $scope.myTrack = {
    url: newAudio.path,
    artist: newAudio.artist,
    title: newAudio.title
  };
};

Upon update of the scope variable, when I click the "play" ion-audio-controls button, ionic-audio fails with the following console message:

Error: undefined is not an object (evaluating 'currentTrack.title')
play@http://IP:8100/lib/ionic-audio/dist/ion-audio.js:140:69
http://IP:8100/lib/ionic-audio/dist/ion-audio.js:200:25
http://IP:8100/lib/ionic/js/ionic.bundle.js:24922:30
completeOutstandingRequest@http://IP:8100/lib/ionic/js/ionic.bundle.js:13604:15
http://IP:8100/lib/ionic/js/ionic.bundle.js:13984:33

Is this functionality not available currently? If not, do you have plans to add such feature? Or can I please get a pointer as to what I should do to implement it?

Thank you so much.

cordova media freezes ui

One issue I ran into with doing a similar module was that when I loaded a network audio file, the entire UI freezes until it's ready to play. I tried to figure out a way to display an $ionicLoading indicator, but because the entire UI freezes before the indicator appears nothing gets displayed. Anyway, I was just wondering if this has a solution for that use case?

Spinner is not getting disappear and pause button not converted to play button after finishing music play in android.

Hi Arielfaur,

Issue with android platform.

AAC stream support

Hello,
I'm trying to stream an icecast server for a webradio (AAC ext).
In the emulator, it tooks approx 10sec to play sound and in my real device loading never ends.

Do you have any ideas why this thing is occurring ? Does this module is supposed to support live streams ?

Thanks for this great module !

Missing Cordova Media plugin (Ionic v1.7.14)

Hello, I've done all your installation steps and also succesfully installed Cordova Media plugin, I can see it in package.json file and I also get cordova-plugin-media 2.1.0 "Media" by running command ionic plugin list so I suppose I have this plugin installed.
But no audio player shows on my page and I am getting this error in the console:

ionic-audio: missing Cordova Media plugin. Have you installed the plugin? 
Run 'ionic plugin add cordova-plugin-media'

ionic.bundle.js:21162 TypeError: Cannot read property 'stop' of null
    at Object.fn (ion-audio.js:320)
    at Scope.$digest (ionic.bundle.js:24515)
    at Scope.$apply (ionic.bundle.js:24783)
    at done (ionic.bundle.js:19196)
    at completeRequest (ionic.bundle.js:19368)
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:19309)

Do you have any idea why is that so? Have I installed wrong version of Cordova Media plugin or is there something that I forgot to install?

iOS spinner stops while file downloads

Appears the spinner stops while the file is downloading on iOS before playing, giving the impression of a freeze or a crash...

I'm using the feature-track-observable branch as I'm using signed URL's and setting the track URL dynamically.

Any ideas why the spinner does that?

How to make it work with ng-repeat based on JSON feed

Hi,

I cannot make it work with the below code :

Controller (gets the JSON feed from my URL as an Array and put it in rootScope.musiques) :

  $http.get('myURL').then(function (resp) {
           $rootScope.musiques = resp.data.posts;
  }

In HTML :
Using ng-repeat to get the track info one by one from the array.
The thumbnail & title is showing correctly, but when clicking on the play button, it doesn't happen anything. I already tried your other branch "observable", but with no luck.

Any idea ?

          <div class="list list-inset" ng-repeat= "track in musiques"  on-refresh="doRefreshMusique()">   

            <ion-audio-track track="track">

              <div class="item item-thumbnail-left">

                <img ng-src="{{track.thumbnail_images.full.url}}" class="feed-image">

                <p>{{track.title}}</p>
                <ion-audio-controls>
                  <a class="button button-icon icon" ion-audio-play></a>
                  <ion-spinner icon="ios"></ion-spinner>
                </ion-audio-controls>
              </div>
              <div class="item">
                <ion-audio-progress-bar track="track" display-time></ion-audio-progress-bar>
              </div>
              </ion-audio-track>
            </div>

Thank you for your help.

$scope.track.play is not a function

hi ! , after update 'Uncaught TypeError: $scope.track.play is not a function' .

Weird file issue

Hi,
I got an .mp3 file that I am trying to play in an ionic app. I've tried your very nice plugin with several other files. Everything seemed to work - but not with the file I got. Here's what I've done so far:

• try online/offline
• validate the mp3 file
• converted the .mp3 to .wav and .aiff
• used different settings on .mp3 conversion
• change sample rate
• check file permissions
• check my code, but since your test audio is working I'm not too worried about this

Do you have any hint for me on what else could cause it not playing. In Xcode as I test the app it would say "now playing ..." but no sound whatsoever. In android there still seems to be another issue since the loading indicator just runs wild with nothing happening. (but I am not the one testing the android app, so I cannot give more info on that atm)

Request:

Would it be possible to broadcast events when the player status changes, for example to enable other elements to update to indicate a track is playing, or for analytics code?

Audio not play until file downloaded to device, screen no response during download

Thanks for the amazing plugin, I have a problem with it however. I have lots of audio files in the server which is pretty large, say from 10MB to 120MB, when testing the player in simulator I found that it seems the player will only play the audio until the whole audio file has been downloaded to the device, while during downloading process the device is frozen in the screen and cannot do anything, no percentage indicator or progress bar can be seen.

May i know if this is the true? i.e. player need to download the whole file before playing. If true, any way to stream the audio when downloading and showing the download percentage?

iOS 9.1 iPhone6

iOS Support

Hi!

I was wondering if this plugin has been tested on iOS yet?

How debug if is working?

So, i tried to use your module, but aperently dont work, i used your example but i could not make it work.

'ion-audio.min.js' is not same as ion-audio.js

Hello.
First of all, thank you for nice plugin for audio player. It is so useful for my project.

I found out an error when I use ion-audio.min.js instead of using ion-audio.js

However, if I run npm install and gulp build, it re-generates ion-audio.min.js then ion-audio.min.js is working properly.

I found out the difference between original ion-audio.min.js and my own re-generated ion-audio.min.js.
I attach the screenshots (The left is re-generated by gulp build, and the right is original ion-audio.min.js)

Can anyone fix ion-audio.min.js on github?
By doing so I don't have to run npm install and gulp build in ionic-audio directory whenever I checkout my project.

Thank you.

MediaManager not defined

when load page has media files show this error :

Error: null is not an object (evaluating 'MediaManager.stop')

when click play shows this error :

TypeError: null is not an object (evaluating 'MediaManager.play')

Debug ..

Playlist support

This is a great module!

Any plans for playlist support? Being able to move forward and back through a playlist while stopping, and possibly releasing audio resources would be very helpful.

Progress bar will only 'seek to' while the track is playing

Progress bar only moves while the track is playing, and not when the current track is stopped.

MediaManager isn't getting the correct duration

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?

demo

Guessing you're aware that the demos don't play?

This code is not working for me.

Hi, this code code is not working for me.

background playback

Hello,

This plugin is working great for me. The only missing feature is audio playback when the app is in the background--Is this feature on the development roadmap? Thanks.

Issues with multiple tracks

Great to see this module evolving.
I took an other test run today, and found some issues.
The issues are with multiple tracks. When one track is playing, trying to play an other track doesn't change the first tracks button back to "play icon". Am I missing something?

.controller('ExercisesCtrl', function($scope, $ionicPlatform) {

  var urlprefix;
  if ($ionicPlatform.is('android')) { urlprefix = '/android_asset/www/' }

  $scope.exercises = [
    { 
      id: 1,
      title: 'Title 1', 
      description: '',
      descriptionlong: '',
      url: urlprefix + 'audio/1.mp3'
    },
    { 
      id: 2,
      title: 'Title 2', 
      description: '',
      descriptionlong: '',
      url: urlprefix + 'audio/2.mp3'
    }
  ];

})

<div class="list card exercise" ng-repeat="exercise in exercises" toggle-class="active">
  <ion-audio-track track="exercise">
    <div class="item">
        <ion-audio-controls>
          <a class="button button-icon button-stable icon ion-play" ion-audio-play></a>
        </ion-audio-controls>
        <h2>{{exercise.title}}</h2>
        <p>{{exercise.description}}</p>
        <div class="desc-long">
          <p>{{exercise.descriptionlong}}</p>
        </div>
    </div>
  </ion-audio-track>
</div>

Play/pause icon delay

There is a little delay when you press the play button until it switches over to pause, and thereby gives the user any UI feedback. I understand it does this because it first checks the Media, and loads it, and so on, and when the status is right, and it starts playing, it switches to "pause".

This makes it feel slow and unresponsive. It would be better to just switch it to "pause" as soon as it's pressed, and if an error occurs switch it back to "play" (or even some other "error" icon).

Enhancement: HTML5 Audio fallback (for ionic serve/view for example)

The title says it all :)

Force play

Hello,
How can I force the change of the currently played track?

Here is my view :

<ion-audio-track ng-repeat="track in roomCtrl.tracks" track="track">
      <div class="item item-icon-left">
        <ion-audio-controls>
          <a class="button button-icon icon" ion-audio-play></a>
        </ion-audio-controls>
        <h2>{{track.title}}</h2>
      </div>
    </ion-audio-track>

And in the controler I want to do something like this :

// Reassign directly
$scope.track = tracks[position++];

Do I need to force something?

Explicit Ionic version in package.json

As we are moving toward Ionic Framework 2.x, my proposition is to add Ionic 1.x as dependency to avoid further confusion.

ionic-audio: missing Cordova Media plugin.

Hey Arielfur,
Really trying to do things right. Getting the ionic-audio: missing Cordova Media plugin. I've run the ionic plugin add cordova-plugin-media and I see cordova-plugin-media right there in my plugins folder. Any idea why I'm getting that error?

I ran ionic plugin rm cordova-plugin-media and ionic plugin add cordova-plugin-media.

Safari shows blank page

Safari shows a blank page when providers are specified as below. The <ion-app></ion-app> is empty. If no providers are set providers: [] then Safari shows the app correctly. (<ion-app>...</ion-app> has content) Emulation in iOS has the same issue.
In either case Safari reports the error ReferenceError: Can't find variable: AudioContext at ionic-web-track.ts:25:91.
In Chrome all above works fine.

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {AudioProvider, WebAudioProvider} from 'ionic-audio/dist/ionic-audio';

// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type, provide} from 'angular2/core';

@app({
template: '<ion-nav [root]="rootPage">',
config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
providers: [provide(AudioProvider, { useFactory: AudioProvider.factory })] // or use [WebAudioProvider] to force HTML5 Audio
})
export class MyApp {
rootPage: any = TabsPage;

constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}

It maybe due to this typescript error when building:
TypeScript error: /Users/Eugene/Code/mindfood/node_modules/ionic-audio/dist/ionic-audio-providers.ts(30,19): Error TS2339: Property 'cordova' does not exist on type 'Window'.

Download locally?

Is it possible to give the user the option to download the audios locally in order to play them when offline?

how to add two ion-audio-track with sync?

hi ..
I want to add tow ion-audio-track one in the page contetnt and the other in top controller
this mean parent audio controll for manage inside other pages
I tried to add ion-audio-track in tow place and make track in rootScope for sharing the same data
but the problem is progress bar not working in two place
there are other options for doing it like this?

Loading Spinner iOS

Hi, this project is just what I'm looking for so thanks!

On iOS (iPhone 6) the loading spinner appears to freeze. I'm using it to stream mp3's from the web. The spinner spins once or twice and then stops until the audio begins to play about 30 seconds later. On my android test device (galaxy S3) the spinner spins and audio begins to play after about 1 or 2 seconds.

stop audio when use ion-infinite-scroll

I using ion-infinite-scroll just I push item in the-the base Audio array but when to load more Item the audio stops and reset to zero.

any solution for this case?

Couldn't run example-audio on iOs emulator without a path modification

In www/js/controllers.js we can see
var urlprefix = '/android_asset/www/audio/';
When I ran "ionic emulate ios" the audio files couldn't be found.
I could make it work using
var urlprefix = 'audio/';

I don't see how to make it to make it work in both cases yet.

current time in progress bar start in "-1" not "0"

I have an audio file but there is a decrease in the current time in the progress bar, I print it what the values in track object I see duration: -1 , status : 0 , progress : 0 , URL : "cdvfile://..."

Changing the track URL

Hi @arielfaur

Thanks for your efforts in creating this nice module, i was working on it and i had a requirement to change the track url based on some conditions then play sound from the new URL, i was building this with cordova so i am using the cdvfile://localhost/ file system

I was able to achieve this by adding a new listener to track url as below in ionAudioTrackCtrl

let me if this sound correct and can be a nice enhancement for this module

   $scope.$watch('track.url', function () {
        if (!MediaManager) return;

        // Stop playing the current track
        MediaManager.stop();

        // Update elements & add as new track 
        init();

        // attach play funtion
        $scope.track.play = function () {

            MediaManager.play($scope.track.id);

            // notify global progress bar if detached from track
            if (!controller.hasOwnProgressBar) notifyProgressBar();

            return $scope.track.id;
        };
    });

How i can get current playing value from ionic-audio ?

i need to change style for progress bar and use other progress but i need to pass current timer when playing
how ? and thanks .

Livestream

Maybe I missed something, as I'm currently not able to play a radio stream.
Is planned to support this kind of audio-files?

Seek to functionality?

This module is awesome. Exactly what i was looking for. Thank you.
I see that you have the "seek to via slider" functionality on your todo list. Do you have any code for this already, or maybe an alpha version, or an ETA? :)

not working

hello
sorry not sure what happened to my topic here
but I can't get it to work
I am using ionic view to test it on my iphone but it does not play anything and the app crashes