Question

I’m currently working through a tutorial on how to make a sound board in HTML5 provided here.

The current piece of code I’ve been having trouble with is this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
   $(function() {
        $("audio").removeAttr("controls").each(function(i, audioElement) {
            var audio = $(this);
            var that = this; //closure to keep reference to current audio tag
            $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                    if(that.play()==true){
                        play.stop();
                    }else{
                that.play();
                    }
            }));
        });
    });
</script>

I’m trying to make it so that only one sound can play at once. I also tried to make a plain stop button by calling that.stop() but it doesn’t work. I am also trying to figure out how to make separate arrays so I can organize the sounds. I tried changing the audio tag as in the tutorial talks about how it creates the array searching for that. But I must be changing the wrong line of code as the new array never works.

Answer 1

To only allow one sound to play at once, I would listen to the DOM media events.

There are several events that would help you. Such as:

• ended
• pause
• play
• playing

If you listen to these, and keep a global flag to tell you if media is playing, you can prevent your other buttons/links from playing a sound, by checking this flag first.

EDITED FOR COMMENT:

Pretty much all of the code you need is JavaScript, not PHP. Have a look at this sample fiddle.

http://jsfiddle.net/B82Nq/11/

It registers a generic media event listener to the 3 <audio> tags, and separate pause, ended and playing event handlers to control playback. When you are sent a stop/start event, a global boolean variable is toggled that tells you whether you should allow another clip to play (I assume you will simply disable the buttons that play them, or something similar).

But I’ve added all media events to show you them all firing anyway – it will help understanding when and how often they are fired. They are listed at MDC here:

(no apology made for using an AC/DC clip 🙂