Я создаю аудио-плейлист с собственным элементом <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>