Player html5 volume

Yubo
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

betaWeb
Réponse acceptée

Tiens j'ai fait ça en 2 minutes, c'est pas top top mais ça fait le job: http://codepen.io/betaweb/pen/LpPwLO

Grafikart

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

Yubo
Auteur

Oui, bien sur http://94.23.115.197/index#/

betaWeb

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

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

Yubo
Auteur

Bonsoir,
@Lartak, non du tout http://prntscr.com/8acsne
@betaWeb oui, je ne sais pas du tout :/

betaWeb

C'est quoi comme lib ? :)

Yubo
Auteur

@betaWeb, j'utilise celle ci http://www.eyecon.ro/bootstrap-slider/ :p

Lartak

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

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

Yubo
Auteur

@betaWeb, petit problème avec nouislider http://prntscr.com/8ad2bl
sympa cette librairie :p

betaWeb

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

Yubo
Auteur

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

betaWeb 
slider.noUiSlider.on('slide', function() {
    // ton code
});

http://refreshless.com/nouislider/events-callbacks/

Yubo
Auteur

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

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