CODEWITHSUNDEEP
javascriptjquery
Richard Stiehm
Richard Stiehm

Reputation: 53

Like to play a random sequence of tones when button is clicked

I'm a total newb at this stuff, but I would like to have a random set of 4 tones play in succession when Button 5 is clicked.....

I have a basic understanding about arrays, Math.random, setInterval... but can't wrap my slow brain around how to make something as simple as this work. Any pointers in the right direction would be much appreciated.

All I have is the code to make the sounds trigger individually.....

$("document").ready(function() {

    $(".button_1").click(function () {
    $('#sound-1').get(0).play();
    });

    $(".button_2").click(function () {
    $('#sound-2').get(0).play();
    });

    $(".button_3").click(function () {
    $('#sound-3').get(0).play();
    });

    $(".button_4").click(function () {
    $('#sound-4').get(0).play();
    });

    $(".button_5").click(function () {
    $("????").get(0).play();
    });
});

Upvotes: 0

Views: 90

Answers (2)

LaurelT
LaurelT

Reputation: 115

You should have a function that plays the sound, and then call that four times.

function playSound(number){
    $('#sound-' + number).get(0).play();
}

$(".button_5").click(function () {
    var tones = 1;
    var t = setInterval(function(){
        if(tones>=4) clearInterval(t);
        playSound(Math.floor((Math.random() * 4) + 1));
        tones++;
    }, 1000);
});

fiddle here http://jsfiddle.net/roanrj6e/

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

Here is how to play a single random sound. You can use Math.floor(Math.random() * 4) + 1 for a number from 1 to 4 , and do "#sound-"+randNum:

$(".button_5").click(function () {
    ranNum = Math.floor(Math.random() * 4) + 1; 
    $("#sound-"+ranNum).get(0).play();
});

To play a number of random songs in succession you can use setInterval(), and keep track of how many times it ran, then clearInterval() when you are done:

$(".button_5").click(function () {
    var plays = 4; // Play 4 sounds, each a second apart.
    var timer = setInterval(function(){
        ranNum = Math.floor(Math.random() * 4) + 1;  
        $("#sound-"+ranNum).get(0).play();
        plays--;
        if(plays < 1) clearInterval(timer);
    }, 1000);
});

Just note that it can repeat a sound, if you don't want repeats you need to keep track of what sounds where played.

Finally, you may want to make sure that you can't click the button again until the sounds played are finished. A basic way to do this is disable the button until the interval is over:

$("#button_5").click(function () {
    var plays = 4;
    var self = this;
    $(self).prop( "disabled", true );
    var timer = setInterval(function(){
        ranNum = Math.floor(Math.random() * 4) + 1  
        $("#sound-"+ranNum).get(0).play();
        plays--;
        if(plays < 1) {
            clearInterval(timer);
            $(self).prop( "disabled", false );
        }
    }, 1000);
});

Here is a fiddle example. Note in the example I'm just doing console.log("#sound-"+ranNum) instead to show what would play.

Upvotes: 1

Related Questions