Utilisation de jQuery pour le contrôle HTML5 <audio> le volume

Ok, je veux contrôler le volume d'un élément HTML5 en utilisant le Curseur jQuery élément. J'ai mis en œuvre la diapositive, mais ne peut pas comprendre comment faire de la valeur du curseur prend la place du "lecteur audio.volume = ?".

Toute aide est très appréciée.

Source

OriginalL'auteur futureslay | 2012-03-06

  1. 15

    La volume propriété est comme l'opacité, il va entre zéro et un, 100%.

    Votre code est si proche, il vous suffit de diviser value par 100 lorsque le réglage du volume de la <audio> élément:

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

    Avis j'ai aussi mis le change gestionnaire d'événement à l'intérieur de l'initialisation de la slider widget.

    Quand je colle le code ci-dessus dans la console, tandis que sur votre page web, et le curseur de volume a fonctionné comme prévu.

    Aussi, vous pouvez lier à la slide événement et le volume changera tant que l'utilisateur glisse le slider widget, pas juste après la fin de déplacement de la poignée:

    $("#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);
    }
});
    Œuvres, avec brio. Toutefois, si vous cliquez au hasard sur la barre, de toute évidence, le curseur se déplace et le volume est réglé, mais si vous allez vers le bas à quelques reprises, le volume va aller vers le bas, mais si vous allez une fois, il descend, puis sauvegardez. Le curseur fonctionne très bien. EDIT: Corrigé cela en ajoutant à la fois la lame et le changement dans l'initialisation. @Jasper
    Fonctionne très bien pour moi! Utilisé avec un custom jQuery UI thème pour le curseur, et juste comme ça j'ai une coutume curseur de volume de la lecture de fichier MP3 en arrière-plan.

    OriginalL'auteur Jasper

  2. 4

    Voici un rapide jsFiddle exemple (remarque: l'audio commence le chargement de la page).

    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:

    <div id="audioSlider"></div>

<audio id="audio1" autoplay>
    <source src="http://www.w3schools.com/html5/song.ogg" type="audio/ogg" />
    <source src="http://www.w3schools.com/html5/song.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>​

    OriginalL'auteur j08691

  3. 0

    En jQuery, vous pouvez obtenir l'objet DOM en utilisant simplement 

    $("audio")[0]

    Donc un exemple serait:

    html

     <div class="audio-clip">
    <h4>Clip 1</h4>
    <input type="button" class="play-button">Play</button>
    <input type="range" min="0" max="1" step="0.1"/>
    <audio src="http://www.w3schools.com/html5/song.mp3"></audio>
 </div>
 <div class="audio-clip">
    <h4>Clip 2</h4>
    <input type="button" class="play-button">Play</button>
    <input type="range" min="0" max="1" step="0.1"/>
    <audio src="http://www.w3schools.com/html5/song.mp3"></audio>
 </div>

    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;
    });
});

    OriginalL'auteur J-Roel

  4. 0

    Cela peut également être réalisé avec une simple entrée de gamme de l'élément, sans l'aide de jQuery-UI.

    <input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="0.3" />


let audioStream = new Audio('http://mofosounds.com:8000/;');

$("#volumeSlider").change(function(){
    let volume = $(this).val();
    audioStream.volume = volume ;
});

    OriginalL'auteur Kurt Van den Branden