Question

当鼠标靠近其中一个按钮时，我有3个按钮和随机声音。

var audio_1 = new Audio("1.mp3");
var audio_2 = new Audio("2.mp3");
var audio_3 = new Audio("3.mp3");

var array_son_video = new Array(audio_1, audio_2, audio_3);

鼠标靠近元素时播放的功能：

$('body').mousemove(function(e){
    $('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);
    if (e.pageX > 300 && e.pageX < 400) {
        var random_number = Math.floor ( Math.random() * 2 );
        son_bt_video_1 = array_son_video[random_number];
        son_bt_video_1.play();
        $("#son_bt_video_1").text('son random : '+random_number);
    }
});

这部分有效，但我发现它不干净：

1）每次鼠标移动时都会生成一个随机数。我只需要在声音结束时生成一个。 2）此外，我需要跟踪声音，以验证它是否暂停：

if (son_bt_video_1.paused) {
    // generate a new sound
}

像这样：

if (e.pageX > 300 && e.pageX < 400) {
    if (son_bt_video_1.paused) {
        var random_number = Math.floor ( Math.random() * 2 );
        son_bt_video_1 = array_son_video[random_number];
        son_bt_video_1.play();
        $("#son_bt_video_1").text('son random : '+random_number);
    }
}

由于声音是随机生成的，我不知道如何跟踪它们。你能告诉我吗？

编辑：

用户无法控制（无播放和暂停按钮）。当鼠标靠近按钮时，只会播放声音。播放完成后，如果鼠标靠近按钮，用户可以再次播放。

此代码不随机使用：

$('body').mousemove(function(e){
    if (e.pageX > 300 && e.pageX < 485) {               
    son_bt_video_1 = array_son_video[0];
    son_bt_video_1.play();
    }
});

Answer 1

塞巴斯蒂安，

我从未使用过new Audio()，但假设它与HTML5 <audio>元素的工作方式相同，那么以下几行应该有效：

var tracks = [
    new Audio("1.mp3"),
    new Audio("2.mp3"),
    new Audio("3.mp3")
];
tracks.current = null;

$('body').mousemove(function(e){
    if(!tracks.current || tracks.current.ended) {
        $('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);
        if (e.pageX > 300 && e.pageX < 400) {
            var random_number = Math.min(tracks.length-1, Math.floor ( Math.random() * tracks.length ));
            tracks.current = tracks[random_number];
            tracks.current.play();
            $("#son_bt_video_1").text(['son random : (' , random_number, ') ', tracks.current.src].join(''));
        }
    }
});

如何跟踪随机生成的元素？

1 个答案: