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

Question

I dont know if my title is clear enough so ill try my best to sumerize. I created audio player containing one song using audio tag. I made all functionality in javascript for player(progress bar, volume bar, play pause stop, time etc..) and now i want to repeat same plyer in column. I copied html and everything is ok but second player with different song is not triggering javascript even though all classes are the same.

My goal is to create something similar to soundcloud website where each audio has its own audio player but i dont want to copy javascript code for every audio. Is there a way to do this using same variables?

Code is huge btw :).

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

Many thanks in advance.

Answer 1

You could use the Audio() constructor.

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

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

Then create a new player by calling player('audio.wav')

ADDED:

Now that I can see your code, the other way to create many players dynamically is:

1. Create an array for your audio files:

const tracks = ['track1.wav', 'track2.wav']

2. Add a container for your players in your HTML

<div id="players"></div>

3. Add a function that creates a player and appends it to the container dynamically

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)
}

The audio() constructor and createElement(audio) both create new audio element, but audio() does not interact with the DOM.

4. Lastly, you would have to create a function that renders as many players as there are tracks.

Once you have rendered the players successfully, you should add an event listener for you controls so that the correct audio is played when user clicks on play etc.

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