How to play local audio files

I have successfully used NativeAudio plugin to play files that are under assets www /audio subfolder.
It works quite well.
The PhoneGap Build page for the plugin
Github page for the plugin

Unfortunately it only works for the files that were bundled with the app.
If you want to download (e.g. with FileTransfer plugin) files and then play them, you can not use that plugin. The reason is that it is coded to use asset folder files (it prefixes path with “www”),
and FileTransfer can not save into assets folder (as per this StackOverflow thread)

So while this plugin does not cover all my needs, it might be of help to you if you only need bundled audio files played.

Try Howler.js. It worked really well for me on all platforms.

Does it play files that were downloaded onto the local file system on both iOS and Android? The files that are on the external local storage on Android, with URIs starting with “file://” ? I implement my own caching, and do not want to rely on their’s. So playing downloaded files is the key. Does it work?

More regarding NativeAudio plugin: using preloadSimple results in playback whose volume is controlled by system sound volume (like alarm) and not media player volume. so in my case two ways of playback (NativeAudio and Media) result in not being able control volume properly. Switching to NativeAudio’s preloadComplex solved the problem on Android, where it started to use media player volume, but not on iOS8 on my iPad Air 2.
A disappointment.
The ideal solution would be to fix NativeAudio, but I plan to switch to Media across the board

Hi,

Can any one help to loop the native audio in ionic framework. Since couple of days I am trying and no luck yet. please see the code below I used. I am pasting the whole code what I am using.

.controller(‘AudioCtrl’, function($scope, $cordovaMedia, $cordovaNativeAudio, MediaService) {
$scope.isSoundLoaded = false;
$scope.audio = null;
$scope.media = null;

$scope.playMedia = function()
{
$scope.media = MediaService.PlayMedia(‘sounds/sound.mp3’);

}
$scope.stopMedia = function()
{
$scope.media.stop();
}

// function playNativeSound(name){
// $cordovaNativeAudio.play(name);
// }

function loadSound()
{
$cordovaNativeAudio
.preloadSimple(‘mySound’, ‘sounds/sound.mp3’)
.then(function (msg) {
}, function (error) {
alert(error);
});
$scope.isSoundLoaded = true;
//playNativeSound(‘mySound’);
}

$scope.playNative = function()
{
if($scope.isSoundLoaded)
{
//playNativeSound(‘mySound’);
$cordovaNativeAudio.play(‘mySound’);

}
else
{
  loadSound();
}

}

$scope.playNativeLoop = function ()
{
if($scope.isSoundLoaded)
{
// $cordovaNativeAudio.loop = true;
// $cordovaNativeAudio.play(‘mySound’);

  $cordovaNativeAudio.play("mySound", { numberOfLoops: 2 });
   
  //myMedia.play({ numberOfLoops: 2 });
  

}
else
{
  loadSound();
  $cordovaNativeAudio.play('mySound');
}

}

$scope.stopNative = function(){
$cordovaNativeAudio.stop(‘mySound’);

  $cordovaNativeAudio.unload('mySound');
  $scope.isSoundLoaded = false;

}

$scope.playWebAudio = function()
{
try{
$scope.audio = new Audio(‘http://codedreaming.com/wp-content/uploads/main_tune.mp3’);
$scope.audio.play();
}
catch(e){
alert(e);
}
}

$scope.playWebAudioLoop = function()
{
$scope.audio = new Audio(‘http://codedreaming.com/wp-content/uploads/main_tune.mp3’);
$scope.audio.loop = true;
$scope.audio.play();
}

$scope.stopWeb = function()
{
$scope.audio.pause();
}

});

If I’m not mistaken, you need to use preloadComplex instead of preloadSimple, if you want to loop sounds. I wrote a tutorial for using Native Audio in Ionic, might help to have a look at that.

1 Like

Hi, I have tried your code. but this is not working for me. I have tried it on iOS device.

@roadrunner42k howler.js looks really neat! Where are you saving your audio files so it can play them? Having a hard time figuring that part out.

Update:

Howler.js turned out to work very well. I did however run into an issue with audio length, somewhere over/around 3:30+ audio length the file wont load. I didn’t investigate the problem very far, I just shrank the length of my audio file.

I also found that losing focus on the app caused issues depending on how your preload is handled, something else to watch out for.

I’m still stuck on this.

I don’t know where to put the audio file. I get no error messages in Chrome Inspect but the audio just does not play.

My code looks like this:

.controller( 'SoundCtrl', function( $scope, $timeout ) {

$scope.sound_on = false;
var media       = new Media( '/android_asset/www/'+'100bpm.wav');

$scope.soundPlayer = function() {
    console.log( "in soundPlayer" );
    if( $scope.sound_on == false ) {
        $scope.sound_on = true;
        media.setVolume( '1.0' );
        media.play();
        console.log( "sound on" );
        console.log( media );

        /*$timeout(function(){
         $scope.sound_on=false;
         console.log("should change");
         }, 12600);*/

    } else {
        media.stop();
        $scope.sound_on = false;
        console.log( "sound off" );
    }
}

});

I followed this. However I still get the same error. error code 0. Pls. help thanks

I’ve got this working on Android but not on iOS.

I’ve removed the “android_asset” but it makes no difference - no sound on iOS.

Any help?

@SubEffect were able to get it working on iOS?

I can get Android and iOS to play a remote mp3 but cannot play anything locally. trying to figure out if its the plugin, ios version 9.3 or just my code that isnt working.

@sakotturi Here is a workaround until the plugin gets updated to get iOS working in 9.3. iOS 9.2 cordova-plugin-media no sound [fix on the way]

1 Like

I knew I wasn’t crazy!

Thanks!

1 Like

hi . I m a new in ionic.i have problem in play music with cordova-plugin-media.my error shows at picture.i did everything has said in this page but i couldn’t get true answer.please help me

Looking good local audio files player : https://market.ionic.io/starters/ionic-mp3-music-player

do you know this program does work with cordova plugin media ?
and my phone is android 4.1 . does cordova-plugin-media work on my phone ?
should i use Crosswalk ?

i get it.
this works less 4.4
and for older version of android (4.0-4.3) you should use Crosswalk.


i hope its helpful:)

on latest android devices the path to assets folder should be “/android_asset/www/assets/”

I’m using your Media fallback for the browser, with some small improvements:

if(typeof Media === "undefined") {
	
	Media = function(src, mediaSuccess, mediaError, mediaStatus) {
		// src: A URI containing the audio content. (DOMString)
		// mediaSuccess: (Optional) The callback that executes after a Media object has completed the current play, record, or stop action. (Function)
		// mediaError: (Optional) The callback that executes if an error occurs. (Function)
		// mediaStatus: (Optional) The callback that executes to indicate status changes. (Function)

		if (typeof Audio !== "function" && typeof Audio !== "object") {
			console.warn("HTML5 Audio is not supported in this browser");
		}

		var sound = new Audio();
		sound.src = src;
		sound.addEventListener("ended", mediaSuccess, false);
		sound.load();

		return {
			// constants
			duration: sound.duration,
			position: 0,
			// Returns the current position within an audio file (in seconds).
			getCurrentPosition: function(mediaSuccess, mediaError){ mediaSuccess(sound.currentTime); position = sound.currentTime},
			// Returns the duration of an audio file (in seconds) or -1.
			getDuration: function(){ return isNaN(sound.duration) ? -1 : sound.duration; },
			// Start or resume playing an audio file.
			play: function(){ sound.play(); if(mediaStatus){mediaStatus(Media.MEDIA_STARTING);}},
			// Pause playback of an audio file.
			pause: function(){ sound.pause(); if(mediaStatus){mediaStatus(Media.MEDIA_PAUSED);}},
			// Releases the underlying operating system's audio resources. Should be called on a ressource when it's no longer needed !
			release: function(){},
			// Moves the position within the audio file.
			seekTo: function(milliseconds){ sound.currentTime = milliseconds / 1000.0},
			// Set the volume for audio playback (between 0.0 and 1.0).
			setVolume: function(volume){ sound.volume = volume; },
			// Start recording an audio file.
			startRecord: function(){},
			// Stop recording an audio file.
			stopRecord: function(){},
			// Stop playing an audio file.
			stop: function(){ sound.pause(); if(mediaStatus){mediaStatus(Media.MEDIA_STOPPED);}; if(mediaSuccess){mediaSuccess();} }
		};
	};

	Media.MEDIA_NONE = 0;
	Media.MEDIA_STARTING = 1;
	Media.MEDIA_RUNNING = 2;
	Media.MEDIA_PAUSED = 3;
	Media.MEDIA_STOPPED = 4;
}