我可以将输入范围变成音频播放器吗?以及如何 link 按钮?

Can I turn the input range into an audio player? and How do I link the buttons?

我一直在尝试弄清楚是否可以将输入滑块变成音频播放器。就是带有 (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>

变成音频播放器是什么意思?

一个音频播放器是这样的:

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

如果你想将输入滑块变成音频播放器,我猜替换为上面的代码。