Playing Sound and Music

In Monaca, there are two ways to play sound and music such as:

Using HTML5 <audio> Tag

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:

...
<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>
...

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:

...
<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>
...

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.

<!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>

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.

<!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>

Last updated

Was this helpful?