[英]Js Audio Volume Slider
I am new to this and I have a question.我是新手,我有一个问题。 how can i put a volume slider?
我怎样才能放一个卷 slider? Thank you,!
谢谢,! I can't find any code for the moment that works for me, I hope your help
我暂时找不到任何适合我的代码,希望您能帮助
HTML: <a id="play-pause-button" class="fa fa-play">
HTML:
<a id="play-pause-button" class="fa fa-play">
JavaScript: 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>
I've tested this and it works.我已经对此进行了测试,并且可以正常工作。
HTML HTML
<input type="range" id="volume-control">
JS 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;
})
I hope it helps我希望它有帮助
You can either use an input range and I think control the volume with js or use the native controls您可以使用输入范围,我认为使用 js 控制音量或使用本机控件
So why not just use an <audio>
element on the html?那么为什么不在 html 上使用
<audio>
元素呢? you can give the attribute controls
and then you won't even need $("#play-pause-button")
你可以给属性
controls
,然后你甚至不需要$("#play-pause-button")
<audio src="your_src" controls="true">
Or is it due to styling?还是因为造型? If so then here's an alternative:
如果是这样,那么这里有一个替代方案:
<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');
});
Last option: use a library for audio controls.最后一个选项:使用音频控制库。
On a different note this code was very bad and repetitive, would recommend not using jquery any further since it barely shortened the code here另一方面,此代码非常糟糕且重复,建议不要再使用 jquery ,因为它几乎没有缩短此处的代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.