Звук не играет ожидаемое количество раз

Question

Звук не играет ожидаемое количество раз

1

Я пытаюсь многократно воспроизвести звуковой эффект; во-первых, он запускается нажатием кнопки, а затем он воспроизводится дважды, после интервалов, которые должны быть через две секунды после последнего.

Мой текущий (соответствующий) 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().

Кроме того, я заметил, что когда я переместил последний период ожидания кольца (от 9000 мс> 2000 мс), он воспроизводился, а затем был установлен на 5000 мс (как и ожидалось), а второй (7000 мс) этого не сделал.

Может ли кто-нибудь дать решение для этого - или, по крайней мере, объяснить мне, почему это происходит?

Примечание. Я намеренно оставил раннюю точку остановки третьему кольцу в других методах после того, как метод метода for for не прошел.

paypercrane 02 июнь 2017, в 03:09

Источник

Теги:

javascript

1 ответ

Ещё вопросы

Gabriele Petrioli · Accepted Answer · 2017-06-01T21-55-00.000Z

Это происходит потому, что файл #ring_audio 3 секунды, и вы пытаетесь воспроизвести его через 2 секунды. Таким образом, он все еще играет, когда вы выдаете ему play команду play.

Вы должны установить его currentTime 0, если вы хотите перезапустить его перед завершением (или дождаться полных 3 секунд перед повторным запуском play на нем)

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

Спасибо. Любая идея, почему он все еще играет во второй раз, а просто не третий?
@paypercrane это был второй повтор, который пропускался из-за проблемы, о которой я упоминал в ответе.
Мое понимание прочитанного очевидно нуждается в некоторой работе. Еще раз спасибо!