HTML5 和 JavaScript 中每个音频播放器的音量滑块

Posted 2023-02-25

【中文标题】HTML5 和 JavaScript 中每个音频播放器的音量滑块

【英文标题】：Volume slider for every audio player in HTML5 and JavaScript

【发布时间】：2020-10-30 10:21:26

【问题描述】：

我正在尝试为每个音频播放器制作一个音量滑块（例如 4 个音频播放器的 4 个音量滑块），到目前为止，我找到了一个仅适用于音频播放器的音量滑块的代码源，老实说，我没有'对javascript一无所知，你们是我最后的希望。这是我目前发现的。

html：

<button id="btn1">Play</button>
<audio id="sound1" loop>
<source src="assets/audio/rain.mp3" type="audio/mpeg"/>
</audio>
<input id="sound1" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
</div>
<div>
<button id="btn2">Play</button>
<audio id="sound2" loop>
<source src="assets/audio/music.mp3" type="audio/mpeg"/>
</audio>
<input id="sound2" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
</div>

JAVASCRIPT：

$('.play').click(function()
    var $this = $(this);
    var id = $this.attr('id').replace(/btn/, '');
    $this.toggleClass('active');
    if($this.hasClass('active'))
        $this.text('Pause'); 
        $('audio[id^="sound"]')[id-1].play();        
     else 
        $this.text('Play');
        $('audio[id^="sound"]')[id-1].pause();
    
);


var audio = document.getElementById('sound1');
var volumeControl = document.getElementById('sound1');

var setVolume = function()
    audio.volume = this.value / 100;
;

volumeControl.addEventListener('change',setVolume);
volumeControl.addEventListener('input',setVolume);

【参考方案1】：

这是适合您的工作示例。

setVolume 是小写您使用的 SetVolume。 呼叫音频的技术需要改进。我已经做到了。

$('.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;
;

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