设置间隔播放音频只循环音频一次?

时间:2018-03-01 10:40:52

标签: javascript setinterval html5-audio addeventlistener

我有一个设定的间隔,在设定的时间间隔内,我有一个声音需要只播放一次,但问题是声音不断循环而且没有任何人对I&#有任何想法39;我在这里做错了就是我试过的: HTML:

<audio id="swoosh">
  <source src="/resources/music/swoosh.mp3" type="audio/mpeg">
</audio>

JS:

    var swoosh = document.getElementById("swoosh");

    setInterval(function () {
        if ($('.c:contains("01")').length > 0) {
            $(".links #abt").attr("href", "about.html");

            swoosh.addEventListener('ended', function () {
                swoosh.pause();
                swoosh.currentTime = 0;
                swoosh.loop = false;
            }, false);
            swoosh.play();

            //
            if ($('.c:contains("02")').length > 0) {
                $(".links #work").attr("href", "work.html");

                swoosh.addEventListener('ended', function () {
                    swoosh.pause();
                    swoosh.currentTime = 0;
                    swoosh.loop = false;
                }, false);
                swoosh.play();
            }
        }
    }, 10);

目的是在class="c"的内容发生变化时播放声音,如果内容为01则音频应该播放一次然后暂停或停止然后当它变为02时它应该再次播放然后停止或暂停等等 提前谢谢。

1 个答案:

答案 0 :(得分:0)

我认为你正试图这样做。存储在变量中,&#34;最后的声音&#34;转载,只有在改变后才会播放新的。听众结束&#34;结束&#34;事件是不必要的,因为每次更改只播放一次。

var swoosh = document.getElementById("swoosh");
var lastPlay = "00";

setInterval(function () {
    var cValue = $('.c').text();
    if (lastPlay != "01" && cValue.indexOf("01") >= 0) {
        $(".links #abt").attr("href", "about.html");
        swoosh.play();
        lastPlay = "01";
    }
    else if (lastPlay != "02" && cValue.indexOf("02") >= 0) {
        $(".links #work").attr("href", "work.html");
        swoosh.play();
        lastPlay = "02";
    }
}, 10);

其他更好的方法是为&#34; .c&#34;的更改事件添加一个监听器。元素,它避免了&#34;查询&#34;每隔10ms。但我没有足够的代码向您展示。