How to play a random audio clip using .play() in JavaScript/jQuery

Question

What I'm trying to do is simply to pick an audio file at random and play it. I'm trying to use the built-in .play() function.

I have four audio clips defined, sound0 - sound3, for example:

<audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>

In JS I can store a pointer to that object like so:

$sound0 = $("#sound0")[0];

and I can play it directly with

$sound0.play();

However, if I try to do something like the following,

var pattern = [],
    tone;
pattern.push(Math.floor(Math.random() * 4));
tone = "#sound" + pattern[0];
$(tone).play();

I get the error, Uncaught TypeError: $(...).play is not a function.

What is the best way to approach this? Thank you!

Answer 1

Unfortunately, I believe the .play() method is part of the DOM and not a jQuery function. You can accomplish it in couple of ways:

1. $(tone)[0].play(); -- as answered by jremi. The only caveat is that you must use index of zero. I don't this will work: $(tone)[1].play();

2. $(tone).get(0).play();

3. $(tone).trigger("play")

Try it here:

 $( document ).ready(function() { function playSound(){ var pattern = [], tone; pattern.push(Math.floor(Math.random() * 4)); tone = "#sound" + pattern[0]; //$(tone).trigger('play'); //uncomment to play //$(tone).get(0).play(); //uncomment to play $(tone)[0].play(); //comment to turn off } $("#button").click(playSound); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <audio id="sound1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <audio id="sound2" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <audio id="sound3" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio> <button id="button">Click To Play</button>

More info can be found here: Play/pause HTML 5 video using JQuery

Answer 2

I'm a bit late to the party but i've just tried this method now and it works fine for me, though it could get a little complicated if you have a lot of clips. I'm also not sure about browser compatability.

var c = document.getElementById('playSound');
c.onclick = function() {
    var number = Math.floor(Math.random() * 2);

    if (number == 0) {
        var audio = new Audio("beep.mp3");
    } else if (number = 1) {
        var audio = new Audio("bloop.mp3");
    }
    
    audio.play();
}

Basically, it just generates a random number each time the button is clicked and each number has an audio clip attached to it. Then the clip is played that corresponds to that number. You can increase the amount of clips by increasing the number on line 3 and adding a new else if statement.