Js 音频音量滑块

Nic*_*mez 4 html javascript audio volume html5-audio

我对此很陌生,我有一个问题。如何放置音量滑块?谢谢你!!我暂时找不到任何适合我的代码,希望您的帮助

HTML: <a id="play-pause-button" class="fa fa-play">

JavaScript:

<script type="text/javascript">
  var audio = new Audio("http://21273.live.streamtheworld.com/LOS40_DANCE.mp3");
$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     autoplay = true;
     audio.play();
     audio.muted = false;
   }
  else
   {
    audio.muted = true;
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
   }
});

audio.onended = function() {
     $("#play-pause-button").removeClass('fa-pause');
     $("#play-pause-button").addClass('fa-play');
};

</script>
Run Code Online (Sandbox Code Playgroud)

小智 10

我已经测试过这个并且它有效。

超文本标记语言

<input type="range" id="volume-control">
Run Code Online (Sandbox Code Playgroud)

JS

let audio = new Audio("http://21273.live.streamtheworld.com/LOS40_DANCE.mp3");

let volume = document.querySelector("#volume-control");
volume.addEventListener("change", function(e) {
audio.volume = e.currentTarget.value / 100;
})
Run Code Online (Sandbox Code Playgroud)

我希望它有帮助

  • 如果您使用“input”事件而不是“change”事件,则音量会在滑动时调整,而不仅仅是在鼠标松开时调整。 (2认同)