Js 音频音量滑块

Posted 2023-02-25

【中文标题】Js 音频音量滑块

【英文标题】：Js Audio Volume Slider

【发布时间】：2020-06-02 19:50:28

【问题描述】：

我是新手，我有一个问题。我怎样才能放一个音量滑块？谢谢！！ 我暂时找不到任何适合我的代码，希望您的帮助

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>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

【参考方案1】：

我已经对此进行了测试，并且可以正常工作。

HTML

<input type="range" id="volume-control">

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

希望对你有帮助

【讨论】：

如果您使用“input”事件而不是“change”事件，则音量在滑动时已经调整，而不仅仅是在 mouseup 时。

【参考方案2】：

您可以使用输入范围，我认为使用 js 控制音量或使用本机控件

那么为什么不在 html 中使用 <audio> 元素呢？你可以给属性controls 然后你甚至不需要$("#play-pause-button")

<audio src="your_src" controls="true">

还是因为造型？如果是这样，那么这里有一个替代方案：

<input id="volume-control" type="range" min="0" max="100" value="50">

const audio = new Audio("http://21273.live.streamtheworld.com/LOS40_DANCE.mp3");
const configure = $("#play-pause-button");
const range = $("#volume-control");
configure.on("click", function () 
    const hasPlayClass = configure.hasClass("fa-play");

    //in nativejs its .classList.toggle() idk about jquery but here's my guess
    configure.toggleClass("fa-play");
    configure.toggleClass("fa-pause");

    audio.muted = hasPlayClass;

    if (hasPlayClass) 
        //did you mean audio.autoplay? Used to be autoplay
        audio.autoplay = true;
        audio.play();
     else 
        audio.pause();
    
);

range.on("change", () => 
  audio.volume = range.value;
);

audio.on("ended", function () 
    configure.removeClass('fa-pause');
    configure.addClass('fa-play');
);

最后一个选项：使用音频控件库。

另一方面，这段代码非常糟糕且重复，建议不要再使用 jquery，因为它几乎没有缩短这里的代码

【讨论】：

你好@Karizma ！我使用 JS，因为我在“播放/暂停”按钮中有样式，我尝试了你的代码，但它仍然对我不起作用。在我的代码中，当您按下“播放/掌声”时，我有一个静音操作，以便音频静音，但 URL 的传输会继续，因为它是来自收音机 fm 的流 URL。因此我认为这条线不会走audio.muted = hasPlayClass;。在我的星期三出现了“输入范围”，但想要增加/减少音量什么也没做。我等待你的帮助。谢谢！

audio.muted = hasPlayClass 与您之前的代码完全相同，但更短，您可以在 if else 语句中看到。至于它不起作用，你检查过控制台吗？您可以在range.on("click") 中记录测试以进行测试吗？我试图复制这种情况，但由于音频安全错误，它对我没有用，所以如果你能告诉我如何复制，我可以进一步帮助你。

这次完美复制您的代码并将range.on (" change ")更改为range.on (" click ")，如您所说，它仍然不起作用:(，如果播放器工作是“播放/暂停”但是音量还没有。我传了一张音频播放器的照片，你可以看到它不是很复杂[1.bp.blogspot.com/-5ObrEGDVHw0/XthuWwitUrI/AAAAAAAAB6A/…，但是音量让我头疼。我等待你的回答..

我不是说要把它改成range.on("click")，我是说在range.on("change")函数里面添加一个console.log("2")测试，看看它是否调用，你有不和谐吗？ SO 不适合长时间讨论