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

我知道.play()和.stop()方法。
但有没有办法将滑块连接到音量？ 或滑块到轨道位置？ 那可能吗？
并且感谢帮助。 谢谢！

Answer 1

jQuery UI使它变得非常简单：

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