0

我有 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();
    }
});
4

1 回答 1

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(''));
        }
    }
});
于 2013-01-24T21:17:53.233 回答