Create a Music Player App using Intel XDK

In this tutorial we will look at Intel XDK’s Audio APIs. Most apps require sound to be played therefore exploring this API is very important. In this tutorial we will first learn how to include Intel XDK audio plugin in our app, then explore various audio apis and then we will finish the tutorial by creating a music player app.

Including Intel XDK Player Plugin

Before we start coding you need to make sure you have included Intel XDK player plugin which exposes all the sound APIs.

Audio File Format

You should always consider to play MP3 audio format because all devices support MP3. In case you are planning to play ACC or OGG then every device won’t be able to play.

Downloading an MP3 File and Putting it in WWW Directory

Before we start exposing this plugin we need to have a MP3 file in our application’s WWW directory for testing. You can either download a mp3 file manually and copy it or else download a MP3 file using JavaScript into the WWW directory.

For this tutorial I have a sound.mp3 file in sounds directory inside WWW directory.

// start a watch on the current audio track. Callback is fired every 1 second. Make sure u fire this function after intel.xdk.player.startAudiovar watchID = intel.xdk.player.watchAudioCurrentTime(watch,1000);

intel.xdk.player.startAudio doesn’t provide any UI therefore you need to build your own music player UI so that user can control the playing of audio.

While playing a music using intel.xdk.player.startAudio if user locks the screen or changes app state to background then audio stops playing therefore intel.xdk.player.startAudio is not a good choice to create a music player app instead its a good choice if you want to play background music while app is running in foreground.

Playing MP3 using Default Music Player

Intel XDK does provide APIs to play music using device’s default music player. Here is the code to play a mp3 file using device’s default music player. Music player is launched inside the app and music is played.

document.addEventListener("intel.xdk.player.podcast.start",function(){//started playing music alert("start");

},false);

document.addEventListener("intel.xdk.player.podcast.stop",function(){//music finished or player closed alert("stop");},false);

document.addEventListener("intel.xdk.player.podcast.error",function(){//error occured therefore music cannot be played alert("error");},false);

document.addEventListener("intel.xdk.player.podcast.busy",function(){//another music is already being played alert("busy");},false);

The music file must be there is local or remote web server because intel.xdk.player.playPodcast takes a complete URL to a mp3 file for playing it. Some music apps allow users to download mp3 files, in that case you need to download the file into WWW directory and then provide the localhost URL to the file.

While playing a music using intel.xdk.player.playPodcast if user locks the screen or changes app state to background then also the music continues playing. This is what makes it a good choice for creating a music player app.

Here is the screenshot on how the player looks in the app

In Android the above code continues playing music even if user presses home button and takes the app to background state. But in iOS the sound stops when user presses the home button. So if you are building a cordova hybrid app then you need to use Background Audio plugin for iOS.

But when you are building a legacy app you can set background audio permission for playing audio in background.

This is how you set audio permission for iOS

This is how you set audio permission for Android

This method is great for creating a music player app. But the problem with this method is that it doesn’t allow player UI customization and also you need to pause the player to change track.

HTML5 Audio API

HTML5 audio api’s can also be used to play music but they aren’t a good choice for creating a music app. Because they stop playing when user locks the screen or changes app state to background. They are good as long as app is open.

Cordova Media Plugin

Many Intel XDK APPs use cordova media plugin to play music. Cordova Media APIs provide similar kinds of interface as intel.xdk.player.startAudio. Benefit of using cordova media plugin from intel.xdk.player.startAudio is that it continuous playing of music even if screen is locked. The default music player is displayed when screen is locked.

This plugin also lets you seek the audio manually. Therefore this plugin is considered the best way to build a music player app.

In Android the above code continues playing music even if user presses home button and takes the app to background state. But in iOS the sound stops when user presses the home button. So if you are building a cordova hybrid app then you need to use Background Audio plugin for iOS. But when you are building a legacy app you can set background audio permission for playing audio in background.

When screen is locked in iOS, the default music player is displayed. It can several controls next/previous buttons and also displays several information like song image, artist, album etc. You can control the music player when screen is locked using RemoteControls plugin.

Hi Guys, i am stuck in a project i made a game in construct 2, it has audio sounds that plays in the background as every game but i want the player to be able to play musics on his iphone while playing the game, because everytime i tried it with plugins if a music is playing and i open the app game the music stops, any kind of help is welcomed. Thanks

Hi thanks for your support , but the code not run for begginers, its very dificult to run the samples, why you dont put a downloadable samples thats works , this way is easy to lear wit functional samples…. Thank you again

“HTML5 audio api’s can also be used to play music but they aren’t a good choice for creating a music app. Because they stop playing when user locks the screen or changes app state to background. They are good as long as app is open.”

well i’ve installed the background plugin and im using the next html5 api code:

pretty basic, but it does work! the plugin handles this code properly and stays in background.

i put this in case someone is facing a similar problem,

(i didnt installed neither the media plugin or the player plugin, and it worked like a charm. )

Next what I want to do is, I need to play audio for a predefined time, like for 10min, so what I did is, I used watchAudioCurrentTime method and using this 1 sec callback, I estimated 10min, after which I implemented the code to stop, which works perfectly fine on my Android 4.4.4 device, but running the same APK on Android 5.0.1 device, doesn’t stop audio, they audio keeps on playing even after 13 min.

To create code blocks or other preformatted text, indent by four spaces:

This will be displayed in a monospaced font. The first four
spaces will be stripped off, but all other whitespace
will be preserved.
Markdown is turned off in code blocks:
[This is not a link](http://example.com)