gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:01:20 26 4
gpt4 key购买 nike

我正在尝试为每个音频播放器制作一个音量 slider (例如 4 个音频播放器的 4 个音量 slider ),到目前为止,我找到了一个仅适用于音频播放器的音量 slider 的代码源,老实说,我不知道关于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);

最佳答案

这是适合您的工作示例。

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

    关于javascript - HTML5 和 JavaScript 中每个音频播放器的音量 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64606513/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com