如何使用滑块更改 HTML5 音频音量或轨道位置? [英] How to Change the HTML5-audio Volume or Track Position with a Slider?
本文介绍了如何使用滑块更改 HTML5 音频音量或轨道位置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我了解 .play()
和 .stop()
方法.
但是有没有办法将滑块链接到音量?或滑块到轨道位置?这可能吗?
并感谢帮助.谢谢!
解决方案
jQuery UI 使它变得非常简单:
$(function() {var $aud = $("#audio"),$pp = $('#playpause'),$vol = $('#volume'),$bar = $("#progressbar"),音频= $aud[0];AUDIO.volume = 0.75;AUDIO.addEventListener("timeupdate", progress, false);函数 getTime(t) {var m=~~(t/60), s=~~(t % 60);return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);}函数进度(){$bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));$pp.text(getTime(AUDIO.currentTime));}$vol.slider({值 : AUDIO.volume*100,幻灯片:函数(ev,ui){$vol.css({背景:"hsla(180,"+ui.value+"%,50%,1)"});AUDIO.volume = ui.value/100;}});$bar.slider({值:AUDIO.currentTime,幻灯片:函数(ev,ui){AUDIO.currentTime = AUDIO.duration/100*ui.value;}});$pp.click(function() {返回音频[AUDIO.paused?'play':'pause']();});});
#player{位置:相对;边距:50px 自动;宽度:300px;文字对齐:居中;字体系列:Helvetica、Arial;}#游戏暂停{边框:1px 实心 #eee;游标:指针;填充:12px 0;颜色:#888;字体大小:12px;边框半径:3px;}#playpause:悬停{边框颜色:#ccc;}#音量,#进度条{边界:无;高度:2px;}#体积{背景:hsla(180,75%,50%,1);}#进度条{背景:#ccc;}.ui-滑块手柄{边界半径:50%;顶部:-5px !重要;宽度:11px!重要;高度:11px!重要;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="玩家"><audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" 自动播放循环><p>您的浏览器不支持音频元素 </p>音频><div id="音量"></div><br><div id="progressbar"></div><br><div id="playpause"></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屋!
查看全文