javascript - 带有自定义音频播放器的多种声音

Question

图片在这里<<<<<<

嗨，我已经用 JS 和 css 编写了自定义音频播放器，我想添加另一个具有这种风格和功能的音轨。但它不起作用！实际上添加了曲目但没有播放！html代码和js代码在这里

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>
          

标签： javascripthtml