Как я могу создать несколько аудиоплееров (каждый из которых содержит разные песни) без копирования функциональности javascript? - PullRequest
Новая
       2

Как я могу создать несколько аудиоплееров (каждый из которых содержит разные песни) без копирования функциональности javascript?

0 голосов
/ 19 марта 2020

Я не знаю, достаточно ли ясен мой заголовок, поэтому постараюсь изо всех сил подвести итог. Я создал аудио плеер, содержащий одну песню, используя аудио тег. Я сделал все функции в javascript для игрока (индикатор выполнения, индикатор громкости, остановка воспроизведения, время и т. Д. c ..), и теперь я хочу повторить то же самое в столбце. Я скопировал html и все в порядке, но второй проигрыватель с другой песней не запускает javascript, хотя все классы одинаковы.

Моя цель - создать что-то похожее на сайт soundcloud, где у каждого аудио есть свой собственный аудио плеер, но я не хочу копировать код javascript для каждого аудио. Есть ли способ сделать это, используя те же переменные?

Код огромен, кстати:). 

HTML:

<!-- AUDIO PLAYER -->
    <div class="mainPlayerDiv">
        <h1>Amelie Lens - Hypnotized</h1>
        <div class="mainPlayer">
            <div class="audioPlayerDiv">
                <div class="playPauseBtn">
                    <div class="btnLine"></div>
                    <div class="btnLine"></div>
                    <div class="btnLine"></div>
                </div>
                <div class="stopBtnDiv">
                    <div class="stopBtn"></div>
                </div>
                <i class="fas fa-volume-down volumeDownIcon"></i>  
                <div class="mainVolumeDiv">
                    <div class="volumeBar" id="volumeBar">
                        <div id="volume"></div>
                    </div>
                    <span id="volPercentage"></span>                    
                </div> 

                <div class="trackTime">
                    <span id="currTime"></span> /
                    <span id="duration"></span>
                </div> 
            </div>
            <a class="dlLink" href="/Track/Amelie Lens - Hypnotized.mp3" download="Amelie Lens - Hypnotized">
                <button class="freeDownload">
                    <h5>mp3</h5>
                    <h3>Free Download</h3>
                </button>
            </a>
            <button class="buyTrack">
                <h3>Buy This Beat</h3>
            </button>
        </div>
        <!--<canvas id="progress" width="500" height="10"></canvas>-->
        <audio id="audio" class="track" src="/Track/Amelie Lens - Hypnotized.mp3" download></audio>
        <div class="progressBarCont" id="progressBarCont">
            <div class="progress" id="progress"></div> 
        </div>
    </div>



Javascript:
// AUDIO PLAYER
var audioEl = document.querySelector('.track');
audioEl.addEventListener('loadedmetadata', function(){
    var duration = audioEl.duration;
    var currentTime = audioEl.currentTime;
    document.getElementById("duration").innerHTML = convertElapsedTime(duration);
    document.getElementById("currTime").innerHTML = convertElapsedTime(currentTime);
    audioEl.volume = 0.31;  
    document.getElementById("volPercentage").innerHTML = 30 + " %";
});
// TIME UP
audioEl.addEventListener("timeupdate", function(){
    var timeline = document.getElementById("currTime");
    var s = parseInt(audioEl.currentTime % 60);
    var m = parseInt((audioEl.currentTime / 60) % 60);
    if (s < 10) {
        timeline.innerHTML = m + ':0' +s;

    } else {
        timeline.innerHTML = m + ':' +s;
    }
    if (audioEl.ended) {
        playPauseBtn.classList.remove('transform');
        stopBtnDiv.classList.add('transform');
        audioEl.currentTime = 0;
        percent = 0;
        progress.style.width = '0';
        stopped = true;
        clearInterval(interval);
        clearInterval(interval2);
        audioPlayerDiv.classList.remove('playAnimation'); 
        audioPlayerDiv.classList.remove('playAnimation2'); 
    }
 }, false);
// OVERALL DURATION
function convertElapsedTime(inputSeconds) {
    var seconds = Math.floor(inputSeconds % 60);
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var minutes = Math.floor(inputSeconds / 60);

    return minutes + ":" + seconds;
}
// PROGRESS BAR
var timer;
var percent = 0;
var audioEl = document.getElementById("audio");
audioEl.addEventListener("playing", function(_event) {
  var duration = _event.target.duration;
  advance(duration, audioEl);
});
audioEl.addEventListener("pause", function(_event) {
  var progress = document.getElementById("progress");
  clearTimeout(timer);
});
var advance = function(duration, element) {
  var progress = document.getElementById("progress");
  increment = 10/duration
  percent = Math.min(increment * element.currentTime * 10, 100);
  progress.style.width = percent+'%'
  startTimer(duration, element);
}
var startTimer = function(duration, element){ 
  if(percent < 100) {
    timer = setTimeout(function (){advance(duration, element)}, 100);
  }
}
// PROGRESS BAR SEEK
var progressBarCont = document.getElementById('progressBarCont');
var progress = document.getElementById("progress");

progressBarCont.addEventListener("mousedown", function(event){
    var viewportset = progressBarCont.getBoundingClientRect();    
    var clickedPos = event.clientX - viewportset.left;
    audioEl.currentTime = (clickedPos / event.target.offsetWidth) * audioEl.duration;
}, false);
// PROGRESS BAR END
/* 
            VOLUME SLIDER
*/
var volumeSlider = document.getElementById("volume");
var volumeBar = document.getElementById("volumeBar");
volumeBar.addEventListener('click', function(e){
    var viewportOffset = volumeBar.getBoundingClientRect();
    var cursorPosition;
    cursorPosition = Math.floor(e.clientX - viewportOffset.left);

    if(cursorPosition <= 9) {
        audioEl.volume = '0.0' + cursorPosition;      
        document.getElementById("volPercentage").innerHTML = cursorPosition + " %";
        volumeSlider.style.width = cursorPosition + "px";
    } else if (cursorPosition === 100) {
        audioEl.volume = 1;     
        document.getElementById("volPercentage").innerHTML = cursorPosition + " %";
        volumeSlider.style.width = cursorPosition + "px";
    } else {
        audioEl.volume = '0.' + cursorPosition;      
        document.getElementById("volPercentage").innerHTML = cursorPosition + " %";
        volumeSlider.style.width = cursorPosition + "px";
    }
    if(cursorPosition >= 50) {
        volumeIconBtn.classList.remove('.fas'); 
        volumeIconBtn.classList.remove('fa-volume-mute'); 
        volumeIconBtn.classList.add('.fas'); 
        volumeIconBtn.classList.add('fa-volume-up'); 
        audioDownUp = 2;
    } else {
        volumeIconBtn.classList.remove('.fas'); 
        volumeIconBtn.classList.remove('fa-volume-up'); 
    }
    if (cursorPosition <= 49) {
        volumeIconBtn.classList.remove('.fas'); 
        volumeIconBtn.classList.remove('fa-volume-mute'); 
        volumeIconBtn.classList.add('.fas'); 
        volumeIconBtn.classList.add('fa-volume-down'); 
        audioDownUp = 1;
    } else {
        volumeIconBtn.classList.remove('.fas'); 
        volumeIconBtn.classList.remove('fa-volume-down'); 
    }
    volPercentage.classList.add('showVolPercent');
    setTimeout(function(){
        volPercentage.classList.remove('showVolPercent');
    }, 5000);
}); 
///////////////////// VOLUME SLIDER END
const playPauseBtn = document.querySelector('.playPauseBtn');
const stopBtnDiv = document.querySelector('.stopBtnDiv');
const stopBtn = document.querySelector('.stopBtn');
playPauseBtn.addEventListener('click', playPauseFunction);
stopBtnDiv.addEventListener('click', stopFunction);
let stopped = true;
var interval;
var interval2;

function playPauseFunction() {
    if(audioEl.paused) {
        playPauseBtn.classList.add('transform');
        playPauseBtn.classList.add('transform2');
        setTimeout(function(){ 
            playPauseBtn.classList.remove('transform2'); 
        }, 200);
        audioEl.play();
        audioEl2.play();
        stopped = false;

        let animation = 1;

        interval = setInterval(function() {
            if(animation === 1) {
                audioPlayerDiv.classList.add('playAnimation'); 
                animation = 0;                 
            } else {
                audioPlayerDiv.classList.remove('playAnimation'); 
                animation = 1;
            }
        },16000);
        let animation2 = 1;
        interval2 = setInterval(function() {
            if(animation2 === 1) {
                audioPlayerDiv.classList.add('playAnimation2'); 
                animation2 = 0;                 
            } else {
                audioPlayerDiv.classList.remove('playAnimation2'); 
                animation2 = 1;
            }
        },32000);
    } else {
        playPauseBtn.classList.remove('transform');
        playPauseBtn.classList.add('transform2');
        setTimeout(function(){ 
            playPauseBtn.classList.remove('transform2'); 
        }, 200);
        audioEl.pause();
        stopped = false;

        clearInterval(interval);
        clearInterval(interval2);
        audioPlayerDiv.classList.remove('playAnimation'); 
        audioPlayerDiv.classList.remove('playAnimation2'); 

    }
}
function stopFunction() {
    if(!audioEl.paused) { // IF PLAYING
        playPauseBtn.classList.remove('transform');
        stopBtnDiv.classList.add('transform2');
        stopBtnDiv.classList.add('transform');
        setTimeout(function(){ 
            stopBtnDiv.classList.remove('transform');
            stopBtnDiv.classList.remove('transform2'); 
        }, 200);
        clearInterval(interval);
        clearInterval(interval2);
        audioPlayerDiv.classList.remove('playAnimation'); 
        audioPlayerDiv.classList.remove('playAnimation2'); 
        audioEl.currentTime = 0;
        percent = 0;
        progress.style.width = '0';
        stopped = true;
        audioEl.pause();
    } else if (audioEl.paused && !stopped) {
        stopBtnDiv.classList.add('transform');
        stopBtnDiv.classList.add('transform2');
        setTimeout(function(){ 
            stopBtnDiv.classList.remove('transform');
            stopBtnDiv.classList.remove('transform2'); 
        }, 200);
        clearInterval(interval);
        clearInterval(interval2);
        audioPlayerDiv.classList.remove('playAnimation'); 
        audioPlayerDiv.classList.remove('playAnimation2'); 
        audioEl.currentTime = 0;
        percent = 0;
        progress.style.width = '0';
        stopped = true;
    } else if (stopped){
        audioEl.currentTime = 0;
        percent = 0;
        progress.style.width = '0';
        stopped = true;
    }
}

вот ss игроков

Большое спасибо заранее.

1 Ответ

0 голосов
/ 19 марта 2020

Вы можете использовать конструктор Audio(). 

const player = (audiofile) => {
  const newPlayer = new Audio(audiofile)
  return newPlayer
}

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

Затем создать нового игрока, вызвав player('audio.wav')

ДОБАВЛЕНО:

Теперь, когда я вижу ваш код, другой способ динамического создания многих проигрывателей:

  1. Создание массива для ваших аудиофайлов: 
const tracks = ['track1.wav', 'track2.wav']
Добавьте контейнер для своих игроков в HTML 
<div id="players"></div>
Добавить функцию, которая создает проигрыватель и динамически добавляет его в контейнер 
const players = document.getElementById('players')

const player = (audiofile) => {
  const newPlayer = document.createElement('audio')
  audio.src = audiofile
  // anything else you want to add
  }
  players.appendChild(newPlayer)
}

Конструктор audio() и createElement(audio) оба создают новый аудио элемент, но audio() не делает взаимодействовать с DOM.

Наконец, вам нужно будет создать функцию, которая рендерит столько игроков, сколько есть треков.

После того, как вы успешно отрендерили игроков, вы должны добавить прослушиватель событий для своих элементов управления, чтобы правильный звук воспроизводится, когда пользователь нажимает на воспроизведение и c.

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...