如何使用滑块更改HTML5音频音量或音轨位置? [英] How to Change the HTML5-audio Volume or Track Position with a Slider?
本文介绍了如何使用滑块更改HTML5音频音量或音轨位置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我知道 .play()
和 .stop()
方法。
但是有没有办法将滑块连接到音量?或者一个滑块到轨道位置?这可能吗?
帮助表示赞赏。谢谢!
解决方案
jQuery UI 让它变得非常简单:
< pre class =snippet-code-js lang-js prettyprint-override>
$(function(){var $ aud = $(#audio),$ pp = $('#playpause' ),AUDIO.addEventListener(timeupdate,progress,false),$ vol = $ ;函数getTime(t){var m = ~~(t / 60),s = ~~(t%60); return(m <100+ m:m)+':'+(s < 10?0+ s:s);}函数进度(){$ bar.slider('value',~~(100 / AUDIO.duration * AUDIO.currentTime)); $ pp.text(getTime(AUDIO。当前时间));} $ vol.slider({value:AUDIO.volume * 100,slide:function(ev,ui){$ vol.css {背景: HSLA(180, + ui.value + %,50%,1)}); AUDIO.volume = ui.value / 100; }}); $ bar.slider({value:AUDIO.currentTime,slide:function(ev,ui){AUDIO.currentTime = AUDIO.duration / 100 * ui.value;}}); $ pp.click(function(){return AUDIO [AUDIO.paused?'play':'pause']();}); };
#player {position:relative; margin:50px auto;宽度:300像素;文本对齐:中心; font-family:Helvetica,Arial;}#playpause {border:1px solid #eee;光标:指针;填充:12px 0;颜色:#888;字体大小:12像素; border-radius:3px;}#playpause:hover {border-color:#ccc;}#volume,#progressbar {border:none; height:2px;}#volume {background:hsla(180,75%,50%,1);}#progressbar {background:#ccc;}。顶部:-5px!重要;宽度:11px!重要;身高:11px!重要; margin-left:-5px!important;}
< link rel =stylesheethref =// code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\">< script src =// code.jquery.com/jquery -3.1.0.js>< / script>< script src =// code.jquery.com/ui/1.12.1/jquery-ui.js\"></script><div ID = 播放器 > < audio id =audiosrc =http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.oggautoplay loop> < p>您的浏览器不支持音频元素< / p> < /音频> < div id =volume>< / div>< br> < div id =progressbar>< / div>< br> < div id =playpause>< / div>< / div>
I know about the .play()
, and the .stop()
methods.
But is there a way to link up a slider to the volume? Or a slider to the track position? Is that possible?
And help is appreciated. Thanks!
解决方案
jQuery UI makes it quite simple:
$(function() {
var $aud = $("#audio"),
$pp = $('#playpause'),
$vol = $('#volume'),
$bar = $("#progressbar"),
AUDIO= $aud[0];
AUDIO.volume = 0.75;
AUDIO.addEventListener("timeupdate", progress, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function progress() {
$bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
$pp.text(getTime(AUDIO.currentTime));
}
$vol.slider( {
value : AUDIO.volume*100,
slide : function(ev, ui) {
$vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
AUDIO.volume = ui.value/100;
}
});
$bar.slider( {
value : AUDIO.currentTime,
slide : function(ev, ui) {
AUDIO.currentTime = AUDIO.duration/100*ui.value;
}
});
$pp.click(function() {
return AUDIO[AUDIO.paused?'play':'pause']();
});
});
#player{
position:relative;
margin:50px auto;
width:300px;
text-align:center;
font-family:Helvetica, Arial;
}
#playpause{
border:1px solid #eee;
cursor:pointer;
padding:12px 0;
color:#888;
font-size:12px;
border-radius:3px;
}
#playpause:hover{
border-color: #ccc;
}
#volume, #progressbar{
border:none;
height:2px;
}
#volume{
background:hsla(180,75%,50%,1);
}
#progressbar{
background:#ccc;
}
.ui-slider-handle{
border-radius:50%;
top: -5px !important;
width: 11px !important;
height: 11px !important;
margin-left:-5px !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="player">
<audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
<div id="volume"></div><br>
<div id="progressbar"></div><br>
<div id="playpause"></div>
</div>
这篇关于如何使用滑块更改HTML5音频音量或音轨位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文