Monaca Docs
Search…
Playing Sound and Music
In Monaca, there are two ways to play sound and music such as:

The HTML5 audio tag may not work properly on iOS devices.

HTML5 <audio> tag can be used to play sound located on external sources by specifying its URL. For example, the following code snippet is using <audio> tag to play an audio file based on a specified source:
...
<body>
<!-- Play the music when the Play control is pressed -->
<audio src="External audio URL" controls></audio>
<!-- The music is played as soon as the application is loaded -->
<!-- <audio src="External audio URL" autoplay></audio> -->
</body>
...

HTML5 <audio> tag can also be used to play sound located locally within a Monaca project. For example, the following code snippet is using <audio> tag to play an audio file located under www/ folder:
...
<body>
<!-- Play the music when the Play control is pressed -->
<audio src="sample.mp3" controls></audio>
<!-- The music is played as soon as the application is loaded -->
<!-- <audio src="sample.mp3" autoplay></audio> -->
</body>
...

With Cordova Media plugin, you have more functions to control over how you play a sound file such as start, pause, stop, resume, set volume and so on.
Before getting started, you are required to enable Media plugin in Monaca Cloud IDE.

In the following example, we will show you how use a sound file from an external source. You can play, pause and stop the music.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var media = null;
var mediaTimer = null;
var srcFile = "External audio URL";
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("ready");
media = new Media (srcFile , onSuccess, onError);
}
function playSound(){
// play the media file one time.
media.play({numberOfLoops: 0});
// start the timer
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// Return a current playback position
media.getCurrentPosition(
//A Callback function if it's success
function(position) {
if (position > -1) {
//If the playback stops at "-0.001" position, set the timer to 0.
if(position == -0.001){
position = 0;
}
setAudioPosition((position) + " sec");
}
},
//A callback function in case of failure
function(error) {
console.log("Error getting pos=" + error);
setAudioPosition("Error: " + error);
}
);
}, 1000);
}
}
function pauseSound(){
if (media) {
media.pause();
}
}
function stopSound(){
if (media) {
media.stop();
}
}
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
function onSuccess(){
console.log("Successfully initialize a media file.");
}
function onError(error){
console.log("Failed to initialize a media file. [ Error code: " + error.code + ", Error message: " + error.message + "]");
}
</script>
</head>
<body style="text-align: center">
<h1>Playing Sound</h1>
<button onclick="playSound()">Play</button>
<button onclick="pauseSound()">Pause</button>
<button onclick="stopSound()">Stop</button><br />
<p id="audio_position"></p>
</body>
</html>

In the following example, we will show you how use a local sound file located under www/ folder. You can play, pause and stop the music.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var media = null;
var mediaTimer = null;
var srcFile = "sample.mp3";
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("ready");
media = new Media (getPath() + srcFile , onSuccess, onError);
}
function getPath() {
var str = location.pathname;
var i = str.lastIndexOf('/');
return str.substring(0,i+1);
}
function playSound(){
// play the media file one time.
media.play({numberOfLoops: 0});
// start the timer
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// Return a current playback position
media.getCurrentPosition(
//A Callback function if it's success
function(position) {
if (position > -1) {
//If the playback stops at "-0.001" position, set the timer to 0.
if(position == -0.001){
position = 0;
}
setAudioPosition((position) + " sec");
}
},
//A callback function in case of failure
function(error) {
console.log("Error getting pos=" + error);
setAudioPosition("Error: " + error);
}
);
}, 1000);
}
}
function pauseSound(){
if (media) {
media.pause();
}
}
function stopSound(){
if (media) {
media.stop();
}
}
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
function onSuccess(){
console.log("Successfully initialize a media file.");
}
function onError(error){
console.log("Failed to initialize a media file. [ Error code: " + error.code + ", Error message: " + error.message + "]");
}
</script>
</head>
<body style="text-align: center">
<h1>Playing Sound</h1>
<button onclick="playSound()">Play</button>
<button onclick="pauseSound()">Pause</button>
<button onclick="stopSound()">Stop</button><br />
<p id="audio_position"></p>
</body>
</html>
Copy link
On this page
Using HTML5 <audio> Tag
Playing Sound from External Sources
Playing the Sound Located inside a Monaca Project
Using Cordova Media Plugin
Playing Sound from External Sources
Playing the Sound Located inside a Monaca Project