喜欢在点击按钮时播放随机的音调序列

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

本文关键字：随机 播放 按钮 喜欢      更新时间：2023-09-26

我是这方面的新手，但我希望在点击按钮5时连续播放一组随机的4个音调。。。。。

我对数组、Math.random、setInterval。。。但我无法用迟钝的头脑思考如何让事情变得如此简单。任何指向正确方向的指针都将不胜感激。

我所拥有的只是让声音单独触发的代码。。。。。

$("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();
    });
});

以下是如何播放单个随机声音。您可以将Math.floor(Math.random() * 4) + 1用于1到4之间的数字，并执行"#sound-"+randNum:

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

要连续播放多首随机歌曲，您可以使用setInterval()，并记录它运行了多少次，然后在完成后使用clearInterval()：

$(".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);
});

请注意，它可以重复一个声音，如果你不想重复，你需要跟踪播放的声音。

最后，您可能需要确保在播放完声音之前不能再次单击按钮。一个基本的方法是disable按钮，直到间隔结束：

$("#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);
});

这是一个小提琴的例子。请注意，在这个例子中，我只是在做console.log("#sound-"+ranNum)，以显示将要播放的内容。

您应该有一个播放声音的函数，然后调用四次。

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);
});

小提琴在这里http://jsfiddle.net/roanrj6e/

相关文章：