Использование jQuery для управления громкостью HTML5 <audio>

Question

Хорошо, я хочу контролировать громкость элемента HTML5 с помощью элемента jQuery Slider. Я реализовал слайд, но не могу понять, как сделать так, чтобы значение слайдера заняло место "audio player.volume =?".

Буду признателен за любую оказанную помощь.

Источник

Answer 1

volume Свойство похоже на непрозрачность, оно колеблется от нуля до единицы, один - 100%.

Ваш код так близко, вам просто нужно разделить value от 100 при настройке громкости <audio> элемент:

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

Обратите внимание, я также поставил change обработчик событий внутри инициализации slider виджет.

Когда я вставляю приведенный выше код в консоль, находясь на вашей веб-странице, ползунок громкости работал, как и ожидалось.

Кроме того, вы можете привязать к slide событие и громкость изменится, когда пользователь перемещает slider виджет, а не только после того, как они закончили перемещение ручки:

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

Answer 2

Вот быстрый пример jsFiddle (примечание: звук начинается при загрузке страницы).

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>​

Answer 3

В jQuery вы можете получить объект DOM, просто используя

$("audio")[0]

Вот пример:
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;
    });
});

Answer 4

Это также может быть достигнуто с помощью простого элемента входного диапазона, без использования 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 ;
});