Кнопки воспроизведения и паузы работают ... но как мне сбросить кнопку, чтобы отобразить символ воспроизведения после завершения звука?

1

Я закодировал кнопку, чтобы отобразить символ "играть" (треугольник). Когда вы нажимаете кнопку, выбранный звук воспроизводится, и вместо этого кнопка отображает символ "пауза". Если вы нажимаете паузу, звук приостанавливается, и кнопка переключается обратно на символ воспроизведения. Все идет нормально. Однако, когда звук 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>
  • 0
    покажи мне элемент #playA
  • 0
    @ JoelGarciaNuño, я добавил код выше. Спасибо за внимание!
Показать ещё 5 комментариев
Теги:
audio
if-statement

1 ответ

2

Я нашел ответ, благодаря предложенным выше предложениям...

<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> 
  • 0
    Убедитесь, что вы addEventListener() строки addEventListener() пределы функции playAudioA() . Теперь, когда вы нажимаете кнопку, вы добавляете новых слушателей событий, что может привести к нежелательному поведению.
  • 0
    @ Маркизцо, готово! Спасибо за вашу помощь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню