Доброго времени суток!
Заранее прошу извинить меня за , возможно, плохо сформулированный вопрос. Я пытался найти информацию в интернете, но похоже пока не достаточно знаний для того чтобы сделать это правильно :D. В общем проблема такая:
Есть макет сайта, на котором в двух разных местах расположены аудиопроигрыватели.
Эти два аудиопроигрывателя - не сильно отличаются по функционалу. Изначально, для реализации этих проигрывателей я писал вот такой html:
<audio class="audio__player" id="audioPlayer" src="audio/Тринадцать карат - В моей голове (galamp3.com).mp3"></audio>
<button class="audio__btn" id="audioBtn">
<svg width="22" height="25" viewBox="0 0 22 25" xmlns="http://www.w3.org/2000/svg">
<path d="M22 12.5L8.14564e-07 25L1.90735e-06 -9.6165e-07L22 12.5Z"/>
</svg>
</button>
<div class="audio__progress--box" id="audioProgressBox">
<progress class="audio__progress-bar" id="audioProgressBar" value="0" max="100"></progress>
<div class="audio__toddler" id="audioToddler"></div>
<div class="audio__toddler-control" id="audioToddlerControl">
<div class="audio__toddler-currTime" id="audioToddlerCurrTime"></div>
</div>
</div>
<div class="audio__currTime" id="audioCurrTime">00:00</div>
<span>-</span>
<div class="audio__durTime" id="audioDurTime">00:00</div>
И вот такой вот js:
let audioBox = document.getElementById('audio');
let audioBtn = document.getElementById('audio__btn');
let audioProgressBar = document.getElementById('audio__progress-bar');
let audioCurrTime = document.getElementById('audio__curr-time');
let audioDurationTime = document.getElementById('audio__duration');
let audioPlayer = document.getElementById('audio__player');
let audioToddler = document.getElementById('audio__toddler');
let audioToddlerControl = document.getElementById('audio__toddler-control');
let audioToddlerControlCurrTime = document.getElementById('audio__toddler-control__curr-time');
let audioProgressBox = document.getElementById('audio__progress--box');
let root = document.documentElement;
let iconPlay = `<svg width="22" height="25" viewBox="0 0 22 25" xmlns="http://www.w3.org/2000/svg"><path d="M22 12.5L8.14564e-07 25L1.90735e-06 -9.6165e-07L22 12.5Z" /></svg>`
let iconPause= `<svg width="25" height="22" viewBox="0 0 25 22" xmlns="http://www.w3.org/2000/svg"><rect width="9" height="22" /><rect x="16" width="9" height="22" /></svg>`
function audioAct () {
if (audioPlayer.paused) {
audioPlayer.play();
audioBtn.innerHTML = iconPause;
} else {
audioPlayer.pause();
audioBtn.innerHTML = iconPlay;
}
}
function audioTime(time) {
time = Math.floor(time);
let minutes = Math.floor(time / 60);
let seconds = Math.floor(time - minutes * 60);
let minutesVal = minutes;
let secondsVal = seconds;
if ( minutes < 10 ) {
minutesVal = '0' + minutes;
}
if(seconds < 10) {
secondsVal = '0' + seconds;
}
return minutesVal + ':' + secondsVal;
}
function audioProgress() {
let progress = (Math.floor(audioPlayer.currentTime) / (Math.floor(audioPlayer.duration) / 100));
audioProgressBar.value = progress;
audioToddler.style.left = progress + '%';
audioCurrTime.innerHTML = audioTime(audioPlayer.currentTime);
audioDurationTime.innerHTML = audioTime(audioPlayer.duration);
}
function audioMouseDown () {
root.addEventListener('mousemove', audioMouseMove);
audioToddlerControl.classList.add('audio__toddler-control--opacity');
}
function audioMouseMove (e) {
root.addEventListener('mouseup', audioChangeTime);
let mouseX = Math.floor(e.pageX - audioProgressBox.offsetLeft);
let progress = mouseX / (audioProgressBox.offsetWidth / 100);
let currTime = null;
if (progress < 0) progress = 0;
if (progress > 100) progress = 100;
currTime = progress / 100 * (Math.floor(audioPlayer.duration));
audioToddlerControl.style.left = progress + '%';
audioToddlerControlCurrTime.innerHTML = audioTime(currTime);
}
function audioChangeTime(e) {
root.removeEventListener('mousemove', audioMouseMove);
root.removeEventListener('mouseup', audioChangeTime);
audioToddlerControl.classList.remove('audio__toddler-control--opacity');
let mouseX = Math.floor(e.pageX - audioProgressBox.offsetLeft);
let progress = mouseX / (audioProgressBox.offsetWidth / 100);
audioPlayer.currentTime = audioPlayer.duration * (progress / 100);
}
audioBtn.addEventListener('click', audioAct);
audioPlayer.addEventListener('timeupdate',audioProgress);
audioProgressBar.addEventListener('click',audioChangeTime);
audioProgressBar.addEventListener('mousedown',audioMouseDown);
По итогу, в первом плеере всё заработало и я был очень доволен. Но когда дошёл до создания второго, подумал о том, что если я сейчас буду точно такой же код писать и для второго, лишь немного изменённого в функционале, то будет как-то очень не красиво. Возможно, конечно, это и правильным было бы решением, но что-то я в этом сильно сомневаюсь. Я подумал убрать всё в html-е и реализовать плеер полностью в js и использовать его как компонент.
Если я правильно понимаю, можно реализовать всё через js, совсем не трогая html. Но проблема в том, что если я вставляю такой же функционал во второй плеер (немного изменив его функционал) события, срабатывающие на одном плеере, также срабатывают и на другом. По задумке так быть не должно.
Ещё раз прошу меня извинить за, возможно, ужасное формулирование своего вопроса. Я уже 5-ый день пытаюсь разобраться в том, как правильно создавать такие плееры с помощью js и чувствую что нужно что-то почитать ещё, но не знаю как найти нужный материал.
Если кто-нибудь смог понять суть моего вопроса, был бы очень признателен, если бы смогли поделиться источником с нужной информацией. Или если это не возможно сделать используя только js, подскажите что необходимо знать чтобы уметь реализовывать такие штуки правильно.
