Я пытаюсь многократно воспроизвести звуковой эффект; во-первых, он запускается нажатием кнопки, а затем он воспроизводится дважды, после интервалов, которые должны быть через две секунды после последнего.
Мой текущий (соответствующий) 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 не прошел.
Это происходит потому, что файл #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);
}