Player html5 volume

Par Yubo, il y a 10 ans

Javascript

Bonjour, je suis entrain de réaliser un player pour une radio et j'ai un problème avec mon js. Mon slider de volume ne change pas le volume.

var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'http://92.222.227.163:8000/stream.mp3'); audioElement.volume=0.5; function play(){ $('#play').addClass('hide'); $('#stop').removeClass('hide'); audioElement.load(); audioElement.play(); } function stop(){ $('#stop').addClass('hide'); $('#play').removeClass('hide'); audioElement.pause(); } $("#volume").slider({ value : 75, step : 1, range : 'min', min : 0, max : 100, slide : function(){ var value = $("#volume").slider("value"); document.getElementById("audio").volume = (value / 100); } }); <input id="volume" data-slider-id='volume' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-tooltip="hide"/>

merci

15 réponses

Grafikart, il y a 10 ans

MMh tu aurais un exemple de ton script en ligne pour qu'on puisse essayer et voir ce qui pourrait aller mal ?

betaWeb, il y a 10 ans

Salut,

Tu utilises une lib pour ton slider ? Il n'y a pas un event 'onChange' afin de catcher le changement de valeur du slider ?

Lartak, il y a 10 ans

Bonsoir.
Tu as deux éléments qui ont l'id volume, sur une div et un input.

betaWeb, il y a 10 ans

C'est quoi comme lib ? :)

Lartak, il y a 10 ans

Voici un copié/collé du HTML généré :

<li> <a> <div class="slider slider-horizontal" id="volume" style="width: 139px;"> <div class="slider-track"> <div class="slider-selection" style="left: 0%; width: 75%;"></div> <div class="slider-handle round" style="left: 75%;"></div> <div class="slider-handle round hide" style="left: 0%;"></div> </div> <div class="tooltip top hide" style="top: -30px; left: 89.25px;"> <div class="tooltip-arrow"></div> <div class="tooltip-inner">75</div> </div> <input id="volume" data-slider-id="volume" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-tooltip="hide"> </div> </a> </li>
betaWeb, il y a 10 ans

Essaye l'event 'slideStop' à la limite, mais la documentation est un peu pourrie je trouve.
Je te conseille celui-ci, il est plutôt complet: http://refreshless.com/nouislider/

Edit: @Lartak +1

betaWeb, il y a 10 ans

Tu as donné une largeur à ton élément ?

Yubo, il y a 10 ans

@betaWeb, ah okay, c'est bon, je lui est mis une largeur. Comment je peut faire pour que le slider modifie le volume?

Yubo, il y a 10 ans

@betaWeb, désolé je suis vraiment nul en js

slider.noUiSlider.on('slide', function() { audio.volume = ui.value; });