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!

You need to set the index on your last line.... it should be .... $(tone)[0].play(); — jremi, Feb 19 '18 at 03:15

score 1 · Accepted Answer · answered Feb 19 '18 at 04:24

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

$(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();
$(tone).get(0).play();
$(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

Thank you, Christian. I've incorporated the change in my code. For some reason, each sound will play exactly once. Then, although the code runs, the sound doesn't play again. Any idea what might be behind this? My project is here: https://codepen.io/diver864/pen/MQQYJv — diver864, Feb 19 '18 at 11:57
After further research, the fix to the 'plays only once' issue is to use .load() before .play() Not sure of the cause behind this, but it works. https://stackoverflow.com/questions/9335577/html5-audio-sound-only-plays-once#9842551 — diver864, Feb 19 '18 at 12:36
You're welcome. Glad it works for you. Thanks for the question. :) — Christian Hur, Feb 20 '18 at 16:24

score 0 · Answer 2 · answered Oct 19 '20 at 12:58

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.

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

2 Answers2