html怎么添加音量条,javascript – 如何使用滑块更改HTML5音频音量或音轨位置？...

参见英文答案 > Using jQuery to control HTML5 volume                                    4个

我知道.play()和.stop()方法.

但有没有办法将滑块连接到音量？或滑块到轨道位置？那可能吗？

并且感谢帮助.谢谢！

解决方法:

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;

}

Your browser does not support the audio element

标签：javascript,jquery,html5,jquery-ui,html5-audio

来源： https://codeday.me/bug/20190927/1823350.html