Play an mp3 after jQuery get

Question

I'm writing a little program that loops in the background and plays an mp3 player when a certain condition is met (checked by a php script).

Here's the script.js:

$(document).ready(function(){

    setInterval(function(){
        $.get("airhorn.php", function(data) {
        if(data == 1){
            //play sound
        }
        });
    },5000); //5 seconds

});

For now airhorn.php always returns a 1.

How do I set it up to make the browser play an mp3 (e.g. "airhorn.mp3") where is says "play sound"?

I've been trying to get jPlayer to work but I'm struggling.

For example, I tried:

 $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer("setMedia", mp3: "http://www.site.com/airhorn.mpp3");

    setInterval(function(){
        $.get("airhorn.php", function(data) {
        if(data == 1){
            $("#jquery_jplayer_1").jPlayer("play");//play sound
        }
        });
    },5000); //5 seconds

});

Edit:

Solution was to put the loop inside the jplayer ready event:

$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer( {
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "http://www.jplayer.org/audio/mp3/Miaow-snip-Stirring-of-a-fool.mp3" // Defines the mp3 url
            })
            setInterval(function(){
        $.get("airhorn.php", function(data) {
            if(data == 1){
                alert("should play")
                $("#jquery_jplayer_1").jPlayer("play"); //play sound
            }
        });
    },5000); //5 seconds
        },
        supplied: "mp3",
        swfPath: "jPlayer/js"
    });



    });

Is the question specifically about jPlayer? Check http://www.jplayer.org/latest/developer-guide/ — JNF, Jun 05 '13 at 05:36
Not necessarily. I've been looking through the developer guide and have tried several things to make it work, but haven't had success. — Apoth, Jun 05 '13 at 05:50
At any rate, your code seems OK, and the problem is the part you _haven't_ included... Not easy to answer that way. Try telling us what you tried. — JNF, Jun 05 '13 at 06:11
And, see if your answer lies here: http://stackoverflow.com/questions/1173861/how-to-play-binary-mp3-stream-with-jquery-javascript — JNF, Jun 05 '13 at 06:12
Take a look here: http://stackoverflow.com/questions/187098/cross-platform-cross-browser-way-to-play-sound-from-javascript — Irvin Dominin, Jun 05 '13 at 06:42

score 0 · Answer 1 · answered Jun 06 '13 at 15:05

The right answer this time... jPlayer needs to be configured after it is ready. It uses a callback in its ready configuration property. This is how you set it up...

$(document).ready(function() {
    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
            $(this).jPlayer("setMedia", {
                mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga: "http://jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            });
        },
        swfPath: "http://jplayer.org/latest/js",
        supplied: "mp3, oga"
    });
});

Here is the official working example: http://jsfiddle.net/jPlayer/XLNCY/

The reason looping works is because it continually tries and eventually it is ready. The problem with continually retrying is you never stop trying to hit your server. It's like a self inflicted DOS attack.

Hope this cleans it up. Cheers!

score 0 · Answer 2 · answered Nov 07 '13 at 10:31

$(document).ready(function() {
    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
            $(this).jPlayer("setMedia", {
                mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga: "http://jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            });
        },
        swfPath: "http://jplayer.org/latest/js",
        supplied: "mp3, oga"
    });
});

Play an mp3 after jQuery get

2 Answers2