时间戳

首页 > 解决方案 > HTML5 和 JavaScript 中每个音频播放器的音量滑块

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

问题描述

我正在尝试为每个音频播放器制作一个音量滑块（例如 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);

标签： javascripthtmlaudiohtml5-audio

解决方案

这是适合您的工作示例。

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

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

推荐阅读