Question

我正试图多次播放声音效果;首先，它是按下按钮触发的，之后再播放两次，间隔时间为最后两秒。

我当前的（相关）HTML：

    <!-- AUDIO -->
    <audio id="ring_audio" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio>
    <audio id="ring_audio2" autostart="false" src="http://www.freesound.org/data/previews/352/352300_2247456-lq.mp3"></audio>
    <audio id="click_audio" autostart="false" src="http://www.freesound.org/data/previews/192/192273_3509815-lq.mp3"></audio>

    <div id="title_screen">
    <img src="http://data.whicdn.com/images/66375886/large.gif">
    <h1>Untitled.</h1>
    <h2>a short adventure game</h2>
    <button id="start" type="button" onclick="playClick(); fade_title(); playRing_Delay(); playRing_Stop();">Begin</button>
    </div>

我目前的javascript：

function playClick() {
    var audio = document.getElementById("click_audio");
    audio.currentTime = 0.3;
    audio.play();
}
function fade_title() {
    var titlescreen = document.getElementById("title_screen");
    titlescreen.style.display = "none";
}
function playRing_Delay() {
    setTimeout(function playRing() {
        var audio = document.getElementById("ring_audio");
        audio.play();
    }, 5000);
    setTimeout(function playRing() {
        var audio = document.getElementById("ring_audio");
        audio.play();
    }, 7000);
}
function playRing_Stop() {
    setTimeout (function playRing() {
        var audio = document.getElementById("ring_audio2");
        audio.play();
    }, 9000);
}

原来，我试图通过使用for循环解决这个问题，并将其仅包含在一个函数中：

function playRing_Delay() {
    setTimeout(function playRing() {
        var audio = document.getElementById("ring_audio");
        for (i = 0; i < 4; i++) {
            if i < 3 { //the first two times
                audio.play(); //plays audio as normal
            }
            else { //the last time it plays
                audio.play();
                setTimeout(function stopRing() {
                    audio.pause();
                }, 500) //stops audio after half a second
            }
        }
    }, 5000);
}

遗憾的是，这不起作用，所以我试图重复第一位三次，只是增加等待毫秒的数量，以便他们顺利地继续;我不打算粘贴它，因为基本上我只是将playRing_Stop（）的内容放在playRing_Delay（）中。

另外，我注意到当我移动最后一个响铃的等待时间（从9000ms> 2000ms）时，它会播放，然后是一个设置为5000ms（如预期的那样），第二个（7000ms）没有。

有人可以为此提供解决方案 - 或者至少向我解释为什么会发生这种情况？

注意：在我的for循环方法失败后，我故意在其他方法中将早期停止点遗漏到第三个环。

Answer 1

这是因为#ring_audio文件长达3秒，并且您尝试在2秒后重播它。所以当你向它发出第二个play命令时它仍在播放。

如果要在完成之前重新启动它，则应将其currentTime设置为0（或等待重新运行play之前的整整3秒）

function playRing_Delay() {
    setTimeout(function playRing() {
        var audio = document.getElementById("ring_audio");
        audio.play();
    }, 5000);
    setTimeout(function playRing() {
        var audio = document.getElementById("ring_audio");
        audio.currentTime = 0;
        audio.play();
    }, 7000);
}

声音没有播放预期的次数

1 个答案: