Использование 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

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

Answer 4

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