Hi I've programmed custom audio player with JS and css, and I want to add another track with that style and function. but it doesn't work! actually the track is added but it's not played! html code and js codes are here
const audioPlayer = document.querySelector(".audio-player");
// const audio = new Audio(
// "https://ia800905.us.archive.org/19/items/FREE_background_music_dhalius/backsound.mp3"
// );
// var audio = document.getElementById('audio');
console.dir(audio);
audio.addEventListener(
"loadeddata",
() => {
audioPlayer.querySelector(".time .length").textContent = getTimeCodeFromNum(
audio.duration
);
audio.volume = 1.0;
},
false
);
//click on timeline to skip around
const timeline = audioPlayer.querySelector(".timeline");
timeline.addEventListener("click", e => {
const timelineWidth = window.getComputedStyle(timeline).width;
const timeToSeek = e.offsetX / parseInt(timelineWidth) * audio.duration;
audio.currentTime = timeToSeek;
}, false);<div class="audio-player">
<audio id="audio">
<source src="sound/1.mp3">
</audio>
<div class="timeline">
<div class="progress"></div>
</div>
<div class="controls">
<div class="play-container">
<div class="toggle-play fas fa-play">
</div>
</div>
<div class="time">
<div class="current">0:00</div>
<div class="divider">/</div>
<div class="length"></div>
</div>