javascript - 如何在不复制 javascript 功能的情况下创建多个音频播放器(每个播放器包含不同的歌曲)？

Question

我不知道我的标题是否足够清楚，所以我会尽力总结。
我使用音频标签创建了包含一首歌曲的音频播放器。我在 javascript 中为播放器制作了所有功能(进度条、音量条、播放暂停停止、时间等)，现在我想在列中重复相同的 plyer。我复制了 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;
    }
}

here's ss of players

提前谢谢了。

Answer 1

您可以使用 Audio()构造函数。

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

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

然后通过调用 player('audio.wav') 创建一个新播放器

添加:

现在我可以看到您的代码，动态创建许多播放器的另一种方法是:

为您的音频文件创建一个数组:

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 交互。

最后，您必须创建一个函数来渲染与轨道一样多的播放器。

成功渲染播放器后，您应该为控件添加一个事件监听器，以便在用户单击播放等时播放正确的音频。

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