Я закодировал кнопку, чтобы отобразить символ "играть" (треугольник). Когда вы нажимаете кнопку, выбранный звук воспроизводится, и вместо этого кнопка отображает символ "пауза". Если вы нажимаете паузу, звук приостанавливается, и кнопка переключается обратно на символ воспроизведения. Все идет нормально. Однако, когда звук OVER, кнопка продолжает отображать символ "пауза". Звук сбрасывается, но изображения нет; вы можете снова нажать кнопку, и звук будет воспроизводиться столько раз, сколько вам захочется, но изображение не будет возвращено в треугольник воспроизведения. Любые советы для новичков?
<div class="playFeatured">
<audio id="playA" preload='none'></audio>
<i><button id="pButtonA" class="featuredAudio fa fa-play" onclick="playAudioA()"></button></i>
</div>
<script>
var loopA = document.getElementById('playA');
function playAudioA() {
if (loopA.paused) {
loopA.play();
pButtonA.className = "";
pButtonA.className = "fa fa-pause";
} else {
loopA.pause();
pButtonA.className = "";
pButtonA.className = "fa fa-play";
loopA.currentTime = 0
}
}
</script>
Я нашел ответ, благодаря предложенным выше предложениям...
<script>
var loopA = document.getElementById('playA');
function playAudioA() {
if (loopA.paused) {
loopA.play();
pButtonA.className = "";
pButtonA.className = "fa fa-pause";
} else {
loopA.pause();
pButtonA.className = "";
pButtonA.className = "fa fa-play";
loopA.currentTime = 0
}
}
loopA.addEventListener('ended', function() {
// Audio has ended when this function is executed.
pButtonA.className = "";
pButtonA.className = "fa fa-play";
},false);
</script>
addEventListener()
строки addEventListener()
пределы функции playAudioA()
. Теперь, когда вы нажимаете кнопку, вы добавляете новых слушателей событий, что может привести к нежелательному поведению.