多个音频播放器的多个音量滑块答案

【问题标题】：Multiple volume sliders for multiple audio players多个音频播放器的多个音量滑块
【发布时间】：2020-10-30 16:28:48
【问题描述】：

我正在尝试为每个音频播放器制作一个音量滑块（例如 4 个音频播放器的 4 个音量滑块），例如 https://deepfocus.io/ ，到目前为止，感谢 deepak 我有一个可以播放/暂停和更改音量的代码不同的音频播放器。但我想用播放和暂停图像替换播放和暂停书面按钮，代码如下：

Javascript：

$('.play').click((e) => {
  var _this = e.target;
  var id = _this.id;
  $(_this).toggleClass('active');
  if ($(_this).hasClass('active')) {
    $(_this).text('Pause');
    document.getElementById(`sound${id}`).play();
  } else {
    $(_this).text('Play');
    document.getElementById(`sound${id}`).pause();
  }
})

function setVolume(id, value) {
  var audio = document.getElementById(`sound${id}`);
  audio.volume = value / 100;
};

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="play" id="1">Play</button>
  <audio id="sound1" loop>
<source src="https://www.partnersinrhyme.com/files/sounds1/MP3/ambience/oceansrfs/SEASHORE.mp3" type="audio/mpeg"/>
</audio>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(1, this.value)" />
</div>
<div>
  <button class="play" id="2">Play</button>
  <audio id="sound2" loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mpeg"/>
</audio>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(2,this.value)" />
</div>

PS：我对Javascript一窍不通，先谢谢了！

【问题讨论】：

标签： javascript html audio html5-audio

【解决方案1】：

在您的情况下，只需使用 img 而不是按钮，并使用 jquery 切换图像的来源：

$('.button').click((e) => {
  var _this = e.target;
  var id = _this.id;
  if (!$(_this).hasClass('play')) {
    $(_this).attr('src', 'https://image.freepik.com/free-icon/pause-button_318-30027.jpg');
    document.getElementById(`sound${id}`).play();
  } else {
    $(_this).attr('src', 'https://image.freepik.com/free-icon/play-alt_318-2156.png');
    document.getElementById(`sound${id}`).pause();
  }

  $(_this).toggleClass('play');
})

function setVolume(id, value) {
  var audio = document.getElementById(`sound${id}`);
  audio.volume = value / 100;
};

img {
  width: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="button" src="https://image.freepik.com/free-icon/play-alt_318-2156.png" id="1" />
  <audio id="sound1" loop>
<source src="https://www.partnersinrhyme.com/files/sounds1/MP3/ambience/oceansrfs/SEASHORE.mp3" type="audio/mpeg"/>
</audio>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(1, this.value)" />
</div>
<div>
  <img class="button" src="https://image.freepik.com/free-icon/play-alt_318-2156.png" id="2" />
  <audio id="sound2" loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mpeg"/>
</audio>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(2,this.value)" />
</div>

【讨论】：