本文介绍了如何使用滑块更改 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/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="//code.jquery/jquery-3.1.0.js"></script><script src="//code.jquery/ui/1.12.1/jquery-ui.js"></script><div id="玩家"><audio id="audio" src="upload.wikimedia/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/ui/1.10.3/themes/smoothness/jquery-ui.css"> <script src="//code.jquery/jquery-3.1.0.js"></script> <script src="//code.jquery/ui/1.12.1/jquery-ui.js"></script> <div id="player"> <audio id="audio" src="upload.wikimedia/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 音频音量或轨道位置?
发布评论