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

编程问答 2022-08-10

问题描述

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

audiohtmlhtml5-audiojavascript