Play a sound at the end of a countdown

Hello guys,
I have created an application using Cordova for Android. There is an account down and a sound playing at the end. I tried different methods, but it does not work. I spend weeks trying to fix the problem but didn"t work.

here is the original code:

// Defines User Access
var intervalTimer = /** @class */ (function () {
    function intervalTimer(options) {
        // This makes the audio play
        this.audioPlayer = options.sound;
        this.audioPlayer.registerSound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1016174/ding2.mp3", "ding");
        this.audioPlayer.registerSound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1016174/ding2.mp3", "ding2");
        // The clock display element
        this.clock = options.clock;
        // The progress display element
        this.progressDisplay = options.progressDisplay;
        this.running = false;
        this["break"] = false;
        this.settings = {
            intervalLength: 1500,
            intervals: 4,
            "break": 300
        };
        // Starting seconds counter to the intervalLength
        this.seconds = this.settings.intervalLength;
        this.intervals = 0;
    }
    //Conditions for when audio will play
    intervalTimer.prototype.ding = function () {
        if (this.audioPlayer) {
            this.audioPlayer.play("ding");
        }
    };
    intervalTimer.prototype.ding2 = function () {
        if (this.audioPlayer) {
            this.audioPlayer.play("ding2");
        }
    };
    intervalTimer.prototype.start = function () {
        this.running = true;
        this.draw();
        var thisTimer = this;
        this.interval = window.setInterval(function () { return thisTimer.tick(); }, 1000);
    };
    intervalTimer.prototype.stop = function () {
        if (this.interval !== null) {
            window.clearInterval(this.interval);
            this.interval = null;
        }
        this.running = false;
        this.draw();
    };
    intervalTimer.prototype.reset = function () {
        this.stop();
        this.intervals = 0;
        this.seconds = this.settings.intervalLength;
        this.draw();
        this.drawProgress();
    };
    intervalTimer.prototype.tick = function () {
        if (this.seconds >= 1) {
            this.seconds--;
            this.draw();
            return;
        }
        // Determines if interval is at break or finished stage.
        if (this["break"]) {
            // Start next interval round.
            this.ding2();
            this.seconds = this.settings.intervalLength;
            this["break"] = false;
        }
        else {
            // Start a break or rest round.
            this.ding();
            this.intervals++;
            this.drawProgress();
            // If done, will stop
            if (this.intervals == this.settings.intervals) {
                this.stop();
                return;
            }
            else {
                // If not done, will continue after break or rest round.
                this.seconds = this.settings["break"];
                this["break"] = true;
            }
        }
    };
    intervalTimer.prototype.draw = function () {
        var minutes = Math.floor(this.seconds / 60);
        var seconds = this.seconds % 60;
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        var display = "<h1>" + minutes + ":" + seconds + "</h1>";
        // Displays visual cue if on interval or a break.
        if (this.running) {
            if (this["break"]) {
                display += "<p>Time to rest!</p>";
            }
            else {
                display += "<p>Interval in progress!</p>";
            }
        }
        // Update the DOM
        this.clock.html(display);
    };
    intervalTimer.prototype.drawProgress = function () {
        var displayOutput = "";
        var finished = this.intervals;
        for (var i = 1; i <= this.settings.intervals; i++) {
            if (finished > 0) {
                // Add the finished image and subtract 1 from finished message
                displayOutput = displayOutput + '<i class="material-icons">done</i>';
                finished--;
            }
            else {
                // Add the interval icon for each interval cycle selected
                //displayOutput = displayOutput + '<img src="images/marathon-training-5">';
                displayOutput = displayOutput + '<i class="material-icons">alarm</i>';
            }
        }
        displayOutput = displayOutput + "<p>You've completed " + this.intervals + " of " + this.settings.intervals + " Intervals!</p>";
        // Displays progress
        this.progressDisplay.html(displayOutput);
    };
    intervalTimer.prototype.setTime = function (seconds) {
        this.seconds = seconds;
        this.draw();
    };
    intervalTimer.prototype.setintervalTime = function (seconds) {
        this.settings.intervalLength = seconds;
        if (!this["break"]) {
            this.seconds = seconds;
            this.draw();
        }
    };
    intervalTimer.prototype.setBreakTime = function (seconds) {
        this.settings["break"] = seconds;
        if (this["break"]) {
            this.seconds = seconds;
            this.draw();
        }
    };
    intervalTimer.prototype.setintervals = function (poms) {
        this.settings.intervals = poms;
        this.drawProgress();
    };
    return intervalTimer;
}());
// Interval timer set up
var pomOptions = {
    clock: $('.interval-timer'),
    progressDisplay: $('#interval-progress'),
    sound: createjs.Sound
};
var myClock = new intervalTimer(pomOptions);
// User interface Set Up
$(document).ready(function () {
    $('#start-stop').on('click', function () {
        if (myClock.running) {
            myClock.stop();
            $(this).html("Start");
        }
        else {
            myClock.start();
            $(this).html("Stop");
        }
		initAd();
        showBannerFunc();
        showInterstitialFunc()
        return false;
    });
    // Reset button set up
    $('#reset').on('click', function () {
        myClock.reset();
        $('#start-stop').html("Start");
		initAd();
        showBannerFunc();
        showInterstitialFunc()
        return false;
    });
	 // cardxad
    $('#cardx').on('click', function () {
		initAd();
        showBannerFunc();
        showInterstitialFunc()
        return false;
    });
		 // cardxad2
    $('#cardxx').on('click', function () {
		initAd();
        showBannerFunc();
        showInterstitialFunc()
        return false;
    });
    // Option controls set up
    // Sets the minutes per interval
    var timeSetting = $('#interval_minutes');
    timeSetting.change(function () {
        myClock.setintervalTime($(this).val() * 60);
    });
    // Sets the minutes per break
    var breakTime = $('#break_minutes');
    breakTime.change(function () {
        myClock.setBreakTime($(this).val() * 60);
    });
    // Set the total number of intervals
    var intervalCount = $('#intervals');
    intervalCount.change(function () {
        myClock.setintervals($(this).val());
    });
});

//initialize the goodies
function initAd(){
        if ( window.plugins && window.plugins.AdMob ) {
            var ad_units = {
                ios : {
                    banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx',		//PUT ADMOB ADCODE HERE
                    interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx'	//PUT ADMOB ADCODE HERE
                },
                android : {
                    banner: 'ca-app-pub-1266469958489664/4139518546',		//PUT ADMOB ADCODE HERE
                    interstitial: 'ca-app-pub-1266469958489664/7783303981'	//PUT ADMOB ADCODE HERE
                }
            };
            var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;

            window.plugins.AdMob.setOptions( {
                publisherId: admobid.banner,
                interstitialAdId: admobid.interstitial,
                adSize: window.plugins.AdMob.AD_SIZE.SMART_BANNER,	//use SMART_BANNER, BANNER, LARGE_BANNER, IAB_MRECT, IAB_BANNER, IAB_LEADERBOARD
                bannerAtTop: false, // set to true, to put banner at top
                overlap: true, // banner will overlap webview
                offsetTopBar: false, // set to true to avoid ios7 status bar overlap
                isTesting: false, // receiving test ad
                autoShow: true // auto show interstitial ad when loaded
            });

            registerAdEvents();
        } else {
            //alert( 'admob plugin not ready' );
        }
}
//functions to allow you to know when ads are shown, etc.
function registerAdEvents() {
        document.addEventListener('onReceiveAd', function(){});
        document.addEventListener('onFailedToReceiveAd', function(data){});
        document.addEventListener('onPresentAd', function(){});
        document.addEventListener('onDismissAd', function(){ });
        document.addEventListener('onLeaveToAd', function(){ });
        document.addEventListener('onReceiveInterstitialAd', function(){ });
        document.addEventListener('onPresentInterstitialAd', function(){ });
        document.addEventListener('onDismissInterstitialAd', function(){ });
    }
//display the banner
function showBannerFunc(){
	window.plugins.AdMob.createBannerView();
}
//display the interstitial
function showInterstitialFunc(){
	window.plugins.AdMob.createInterstitialView();	//get the interstitials ready to be shown and show when it's loaded.
	window.plugins.AdMob.requestInterstitialAd();
}

app.initialize();

Here is the code I tried to add to the code above:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
	document.querySelector("#playMp3").addEventListener("touchend", playMP3, false);
};

function playMP3() {
    var mp3URL = getMediaURL("sounds/button-1.mp3");
    var media = new Media(mp3URL, null, mediaError);
    media.play();
}

function getMediaURL(s) {
    if(device.platform.toLowerCase() === "android") return "/android_asset/www/" + s;
    return s;
}

function mediaError(e) {
    alert('Media Error');
    alert(JSON.stringify(e));
}

I will really appreciate any help.
Thanks

It will not work in the browser due to plugin dependency. The first step is to add the cordova plugin:

meteor and cordova:org.apache.cordova.media@0.2.15 

Then create a function to play the sound:

playLimitSound = function() {
if (Meteor.is Cordova) {
var my_media = new Media(‘http://MY_IP:port/test.mp3’,
// success callback
function () {
console.log (“play Audio (): Audio Success”);
},
// error callback
function (err) {
console.log (“play Audio (): Audio Error:” + err);
}
);
// Play audio
my_media.play();
}

};

This is another solution. It works both in the browser and in the cordova app.

new Audio(‘http://MY_IP:port/test.mp3’).play()

Thanks for your answer
I did everything you said. The problem is how to integrate your code inside the first t ùmake it working with the countdown.
here:

function intervalTimer(options) {
        // This makes the audio play
        this.audioPlayer = options.sound;
        this.audioPlayer.registerSound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1016174/ding2.mp3", "ding");
        this.audioPlayer.registerSound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1016174/ding2.mp3", "ding2");
        // The clock display element

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.