@Just_Dinya

Как использовать функционал одного блока кода в нескольких местах на странице html?

Доброго времени суток!
Заранее прошу извинить меня за , возможно, плохо сформулированный вопрос. Я пытался найти информацию в интернете, но похоже пока не достаточно знаний для того чтобы сделать это правильно :D. В общем проблема такая:
Есть макет сайта, на котором в двух разных местах расположены аудиопроигрыватели.
61e9642492d75531843187.png
61e96475ee2eb956899989.png
Эти два аудиопроигрывателя - не сильно отличаются по функционалу. Изначально, для реализации этих проигрывателей я писал вот такой 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, подскажите что необходимо знать чтобы уметь реализовывать такие штуки правильно.
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
Вариант первый
Код на HTML дублировать но вместо id использовать id у родительскогоелемента и классы
JS код оформить в виде функции в которую передавать id родительского компонента а все выборки внутри делать по классам относительно родительского документа
И все слушатели, которые вешаешь на документ root.addEventListener заменить слушателями на елементах с требуемым id

Вариант второй
Оформить это в виде компонента на одном из фреймвоков (Angular, Vue, React) и вставлять компонент в нужное место.

Ну и самое главное без теории это все будут метания, поэтому сначала
https://www.yakaboo.ua/ua/javascript-polnoe-rukovo...
Потом
https://uk.reactjs.org/docs/getting-started.html
Потом писать

Есть еще нейтив web components но я с ними не сталкивался, поэтому не раскажу ни за комьюнити, ни за поддержку
https://developer.mozilla.org/en-US/docs/Web/Web_C...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы