如何使用滑块更改 HTML5 音频音量或轨道位置?

编程入门行业动态更新时间:2024-10-25 00:36:39

本文介绍了如何使用滑块更改 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;}

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