CODEWITHSUNDEEP
javascriptfunctionaudiorandomready
Markess
Markess

Reputation: 1

RANDOM PLAY SOUND OVERLAP

Hey all I need your help. I have everything set up and working perfect for my random sound script. The problem is I have it set to when I mouse over a picture it plays a random sound (That's what I want). However, every time I mouse over the picture it start another sound, and then another if I mouse over it again while the other sound is still playing. I eventually want to do this with longer sounds but that would be a mess with sounds playing on top of each other. Is there a way to set it so it only plays one at a time (Random Selection) or no start until the playing file is finished. Anything to prevent this???

Here is the code:

    $(document).ready(function(){
        $('audio').each(function(){
            this.volume = 0.4;
        });
        $(".ladyleepic img").mouseover(function(){
            var n = Math.ceil(Math.random() * 5);
            $("#audio"+n).trigger('play');
        });

    });

I should add I'm using JQuery and Audio Tags in Dreamweaver CS6. (Audio 1,2,3 and so on)

<audio id="audio1"

  <source src=".mp3"></source>
  <source src=".ogg"></source>

< /audio

Thank you, BigMarkess

Upvotes: 0

Views: 271

Answers (1)

david4096
david4096

Reputation: 204

You need to bind an event to when the sound finishes playing:

How can I tell when an HTML5 audio element has finished playing?

You could add a flag that is set by this event.

$(document).ready(function(){
    $('audio').each(function(){
        this.volume = 0.4;
    });
    var playing = false;
    $("audio").bind('ended', function(){
        playing = false;
    });

    $(".ladyleepic img").mouseover(function(){
        if (!playing) {
            var n = Math.ceil(Math.random() * 5);
            $("#audio"+n).trigger('play');
            playing = true;
        }
    });
});

Upvotes: 1

Related Questions