HTML5 аудио запускает событие паузы во время поиска - PullRequest
Новая
       6

HTML5 аудио запускает событие паузы во время поиска

0 голосов
/ 09 мая 2018

Я создаю аудио-плейлист с собственным элементом <audio>. Примерно так:

HTML 

<div class="audio-player">
  <audio id="audio" controls="controls">
    <source src="0.mp3" >       
  </audio>
  <button id="button0" data-track-url="0.mp3">Play 0</button>
  <button id="button1" data-track-url="1.mp3">Play 1</button>
  <button id="button2" data-track-url="2.mp3">Play 2</button>
</div>

У меня есть несколько EventListener на кнопках. Если я нажму на одну из кнопок, то в аудиоэлементе будет воспроизводиться нужная mp3.

JAVASCRIPT 

for (var i = 0; i < my_buttons.length; i++) {         
   my_buttons[i].addEventListener("click", buttonClickAction, false);       
}

Я также добавил eventListener к событию play и pause элемента <audio>, чтобы две кнопки (Native Play / Pause и <button>) работали одинаково.

JAVASCRIPT 

audio.addEventListener("play", audioPlayAction, false);
audio.addEventListener("pause", audioPauseAction, false);

Теперь у меня есть следующая проблема:

Если я нажимаю кнопку, начинает воспроизводиться эквивалентная дорожка. Если я затем ищу временную шкалу нативного игрока, то элемент <audio> запускает событие «пауза» и «старт». Можно ли предотвратить запуск события «пауза / старт» при поиске? Или можно отличить обычное событие «пауза / начало» от поискового события «пауза / начало»?

Я надеюсь, что есть решение.

привет

EDIT

Итак, вы можете увидеть, в чем конкретно заключается моя Проблема, посмотрите этот фрагмент. В момент, когда я начинаю искать, мигает кнопка: 

var audio = document.getElementById("audio"),
    button = document.getElementById("button"),
    isPlaying = false;

var initPlayer = function() {
  audio.addEventListener("play", audioPlayAction, false);
  audio.addEventListener("pause", audioPauseAction, false);
  audio.addEventListener("seeking", audioSeekingAction, false);
  audio.addEventListener("seeked", audioSeekedAction, false);
  button.addEventListener("click", buttonClickAction, false);
},
buttonClickAction = function(event) {
  if(isPlaying){
    audio.pause();
    button.classList.add("is-playing");
  }else{
    audio.play();
    button.classList.remove("is-playing");
  }
},
audioPlayAction = function(event) {
  button.classList.add("is-playing");
  isPlaying = true;
  
},
audioPauseAction = function(event) {
  button.classList.remove("is-playing");
  isPlaying = false;
},
audioSeekingAction = function(event) {
  event.target.play()
},
audioSeekedAction = function(event) {
  event.target.play() 
};

initPlayer();
.button-pause {
  display:none;    
}
.is-playing .button-pause {
  display:inline-block;
}
.button-play {
  display:inline-block;
}
.is-playing .button-play {
  display:none;
}
<audio id="audio" controls="controls" preload="none" >
  <source src="https://archive.org/download/calexico2006-12-02..flac16/calexico2006-12-02d1t02.mp3" >		
</audio><br>
<button id="button">
  <span class="button-play">PLAY</span>
  <span class="button-pause">PAUSE</span>
</button>
...