Usando o jQuery para controlar o volume do HTML5

Ok, eu quero controlar o volume de um elemento HTML5 usando o elemento jQuery Slider. Eu implementei o slide, mas não consigo descobrir como fazer com que o valor do controle deslizante ocupe o lugar do “audio player.volume =?”.

Qualquer ajuda é muito apreciada.

Fonte

A propriedade de volume é como opacidade, varia entre zero e um, sendo um deles 100%.

Seu código está tão próximo, você só precisa dividir o value por 100 ao definir o volume do elemento :

 $("#slider").slider({ value : 75, step : 1, range : 'min', min : 0, max : 100, change : function(){ var value = $("#slider").slider("value"); document.getElementById("audio-player").volume = (value / 100); } }); 

Repare que também coloquei o manipulador de events de change dentro da boot do widget de slider .

Quando eu colar o código acima no console enquanto estiver na sua página da Web, e o controle deslizante de volume funcionou conforme o esperado.

Além disso, você pode vincular-se ao evento de slide e o volume será alterado à medida que o usuário deslizar o widget do slider , não apenas depois de concluir o movimento da alça:

 $("#slider").slider({ value : 75, step : 1, range : 'min', min : 0, max : 100, slide : function(){ var value = $("#slider").slider("value"); document.getElementById("audio-player").volume = (value / 100); } }); 

Aqui está um exemplo rápido do jsFiddle (nota: o áudio começa no carregamento da página).

jQuery:

 $('#audioSlider').slider({ orientation: "vertical", value: audio1.volume, min: 0, max: 1, range: 'min', animate: true, step: .1, slide: function(e, ui) { audio1.volume = ui.value; } });​ 

HTML:

 

No jQuery você pode obter o object DOM simplesmente usando

 $("audio")[0] 

Então, um exemplo seria:
html

  

Clip 1

Play

Clip 2

Play

jQuery

 $(document).ready(function() { $(".play-button").click(function(){ $(this).parent("div").find("audio").trigger('play'); }); $(".audio-clip input[type='range']").on("input", function(){ $(this).parent("div").find("audio")[0].volume = this.value; }); });