我能把输入范围变成音频播放器吗？我该如何连接按钮呢？

Question

我一直试图找出我是否可以把输入滑块变成一个音频播放器。它是带有(class = "progress-bar")的那个。这是基本的设计。

我不确定这是否可能，但我会被指向正确的方向来完成这个音乐播放器。

<section class="container">
  <div class="Song-Photo">
    <img src="https://th.bing.com/th?id=OIF.%2fA7TZqecnjxCdpKO6nnZ3w&pid=ImgDet&rs=1" alt="Kung-Fu Kenny">
  </div>
  <div class="Music-Player">
    <div class="Song-Title">Heart Part V</div>
    <span id="Audio-Player">
      <div class="current-time"> Current-Time </div>
      <input id="Audio-Player" class="progress-bar" min="0" max="0" type="range">
      <div class="duration">Duration</div>
      <button class="mute">Mute</button>
      <input id="Audio-Player" class="volume" type="range" min="0" max="100">
    </span>
    <div id="button-functions" class="Audio-Playback">
      <button id="button-functions" class="rewind">Rewind</button>
      <button id="button-functions" class="play-pause">Play</button>
      <button id="button-functions" class="fast-forward">Fast-Forward</button>
      <button id="button-functions" class="random-shuffle-repeat">Shuffle/Repeat</button>
    </div>
    <div class="Artist">Kendrick Lamar</div>
  </div>
</section>

Answer 1

你把它变成音频播放器是什么意思？

音频播放器是这样的：

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

如果您想将输入滑块转换成音频播放器，请用上面的代码替换。