Question

我正在使用原生<audio>元素构建音频播放列表。 Somethimg是这样的：

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>

按钮上有一些eventListeners。如果我单击其中一个按钮，则右侧mp3在音频元素中播放。

JAVASCRIPT

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

我还在<audio>元素的播放和暂停事件中添加了一个eventListener，因此两个按钮（Native Play / Pause和<button>）具有相同的行为。

JAVASCRIPT

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

现在我遇到以下问题：

如果按下按钮，则会开始播放等效音轨。如果我然后寻找本机播放器的时间栏，则<audio>元素会触发“暂停”和“开始”事件。是否有可能阻止“暂停/开始”事件在搜索时触发？或者是否可以将正常的“暂停/开始”事件与寻求“暂停/开始”事件区分开来？

我希望有一个解决方案。

问候

修改

因此，您可以看到我的问题到底是什么，请查看此代码段。在我开始寻找的那一刻，按钮上闪烁着：

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>

HTML5音频会在搜索

0 个答案: