Monaca Docs
Search…
Playing Sound and Music
In Monaca, there are two ways to play sound and music such as:
Using HTML5 <audio> Tag
The HTML5
audio tag may not work properly on iOS devices.Playing Sound from External Sources
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:1
...
2
<body>
3
<!-- Play the music when the Play control is pressed -->
4
<audio src="External audio URL" controls></audio>
5
<!-- The music is played as soon as the application is loaded -->
6
<!-- <audio src="External audio URL" autoplay></audio> -->
7
</body>
8
...
Copied!
Playing the Sound Located inside a Monaca Project
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:1
...
2
<body>
3
<!-- Play the music when the Play control is pressed -->
4
<audio src="sample.mp3" controls></audio>
5
<!-- The music is played as soon as the application is loaded -->
6
<!-- <audio src="sample.mp3" autoplay></audio> -->
7
</body>
8
...
Copied!
Using Cordova Media Plugin
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.
Playing Sound from External Sources
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.
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
<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'">
7
<script src="components/loader.js"></script>
8
<link rel="stylesheet" href="components/loader.css">
9
<link rel="stylesheet" href="css/style.css">
10
<script>
11
var media = null;
12
var mediaTimer = null;
13
var srcFile = "External audio URL";
14
15
document.addEventListener("deviceready", onDeviceReady, false);
16
function onDeviceReady() {
17
console.log("ready");
18
media = new Media (srcFile , onSuccess, onError);
19
}
20
21
function playSound(){
22
// play the media file one time.
23
media.play({numberOfLoops: 0});
24
// start the timer
25
if (mediaTimer == null) {
26
mediaTimer = setInterval(function() {
27
// Return a current playback position
28
media.getCurrentPosition(
29
//A Callback function if it's success
30
function(position) {
31
if (position > -1) {
32
//If the playback stops at "-0.001" position, set the timer to 0.
33
if(position == -0.001){
34
position = 0;
35
}
36
setAudioPosition((position) + " sec");
37
}
38
},
39
//A callback function in case of failure
40
function(error) {
41
console.log("Error getting pos=" + error);
42
setAudioPosition("Error: " + error);
43
}
44
);
45
}, 1000);
46
}
47
}
48
49
function pauseSound(){
50
if (media) {
51
media.pause();
52
}
53
}
54
55
function stopSound(){
56
if (media) {
57
media.stop();
58
}
59
}
60
61
function setAudioPosition(position) {
62
document.getElementById('audio_position').innerHTML = position;
63
}
64
65
function onSuccess(){
66
console.log("Successfully initialize a media file.");
67
}
68
69
function onError(error){
70
console.log("Failed to initialize a media file. [ Error code: " + error.code + ", Error message: " + error.message + "]");
71
}
72
</script>
73
</head>
74
<body style="text-align: center">
75
<h1>Playing Sound</h1>
76
<button onclick="playSound()">Play</button>
77
<button onclick="pauseSound()">Pause</button>
78
<button onclick="stopSound()">Stop</button><br />
79
<p id="audio_position"></p>
80
</body>
81
</html>
Copied!
Playing the Sound Located inside a Monaca Project
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.1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
<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'">
7
<script src="components/loader.js"></script>
8
<link rel="stylesheet" href="components/loader.css">
9
<link rel="stylesheet" href="css/style.css">
10
<script>
11
var media = null;
12
var mediaTimer = null;
13
var srcFile = "sample.mp3";
14
15
document.addEventListener("deviceready", onDeviceReady, false);
16
function onDeviceReady() {
17
console.log("ready");
18
media = new Media (getPath() + srcFile , onSuccess, onError);
19
}
20
21
function getPath() {
22
var str = location.pathname;
23
var i = str.lastIndexOf('/');
24
return str.substring(0,i+1);
25
}
26
27
function playSound(){
28
// play the media file one time.
29
media.play({numberOfLoops: 0});
30
// start the timer
31
if (mediaTimer == null) {
32
mediaTimer = setInterval(function() {
33
// Return a current playback position
34
media.getCurrentPosition(
35
//A Callback function if it's success
36
function(position) {
37
if (position > -1) {
38
//If the playback stops at "-0.001" position, set the timer to 0.
39
if(position == -0.001){
40
position = 0;
41
}
42
setAudioPosition((position) + " sec");
43
}
44
},
45
//A callback function in case of failure
46
function(error) {
47
console.log("Error getting pos=" + error);
48
setAudioPosition("Error: " + error);
49
}
50
);
51
}, 1000);
52
}
53
}
54
55
function pauseSound(){
56
if (media) {
57
media.pause();
58
}
59
}
60
61
function stopSound(){
62
if (media) {
63
media.stop();
64
}
65
}
66
67
function setAudioPosition(position) {
68
document.getElementById('audio_position').innerHTML = position;
69
}
70
71
function onSuccess(){
72
console.log("Successfully initialize a media file.");
73
}
74
75
function onError(error){
76
console.log("Failed to initialize a media file. [ Error code: " + error.code + ", Error message: " + error.message + "]");
77
}
78
</script>
79
</head>
80
<body style="text-align: center">
81
<h1>Playing Sound</h1>
82
<button onclick="playSound()">Play</button>
83
<button onclick="pauseSound()">Pause</button>
84
<button onclick="stopSound()">Stop</button><br />
85
<p id="audio_position"></p>
86
</body>
87
</html>
Copied!
Last modified 9mo ago