Как автоматически обновить аудио слайдер JQuery UI

Question

Как автоматически обновить аудио слайдер JQuery UI

0

Я ищу помощь, потому что в настоящее время я застрял в скрипте. Позвольте мне объяснить: у меня есть страница html5 audio player, а также слайдер, действующий на значение "id".audio, сделанное с помощью библиотеки jquery ui.

Когда мы действуем на слайдере, звуковое значение автоматически изменяется, а также значение игрока, но когда мы действуем на слайдере проигрывателя, реализация с jQuery (слайдер) не изменяется, если вы не измените значение перед загрузкой сценарий... В заключение я хотел бы знать, как заставить ползунок автоматически обновляться автоматически, в зависимости от аудиоплеера html5.

Вот сценарий:

    $(function() {

        //Store frequently elements in variables
        var slider  = $('#slider'),
            tooltip = $('.tooltip');

        //Hide the Tooltip at first
        tooltip.hide();

        //Call the Slider
        $(window).load(function(){
        slider.slider({
            //Config
            range: "min",
            min: 0,
            max: 1,
            animate: true,
            value: audio1.volume,
            step: 0.01,             
            start: function(event,ui) {
                tooltip.fadeIn('fast');
            },

            //Slider Event
            slide: function(e, ui) { //When the slider is sliding

                var value  = slider.slider('value'),
                    volume = $('.volume');
                audio1.volume = ui.value;
                if(value <= 0.05) { 
                    volume.css('background-position', '0 0');
                } 
                else if (value <= 0.25) {
                    volume.css('background-position', '0 -25px');
                } 
                else if (value <= 0.75) {
                    volume.css('background-position', '0 -50px');
                } 
                else {
                    volume.css('background-position', '0 -75px');
                };

            },

            stop: function(event,ui) {
                tooltip.fadeOut('fast');
            },
        });

    });
    });

Спасибо заранее и извините за мой английский (не мой родной язык), Aurélien

MrAurelfender 01 май 2014, в 12:52

Источник

Теги:

jquery

audio

html5

jquery-ui

slider

1 ответ

Ещё вопросы

apaul · Answer 1 · 2014-05-01T14-32-00.000Z

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

Рабочий пример

$(function () {
    var seeksliding;
    var createSeek = function () {
        if ($('#audio').prop('readyState')) { 

            var audio_duration = $('#audio').prop('duration'); 

            $('#seekSlider').slider({
                value: 0,
                step: 0.01,
                orientation: "horizontal",
                range: "min",
                max: audio_duration, 
                animate: 200,
                slide: function () {
                    seeksliding = true;
                },
                stop: function (e, ui) {
                    seeksliding = false;
                    $('#audio').prop("currentTime", ui.value);
                }
            });
        }
    };
    createSeek();

    var seekUpdate = function () {
        var currenttime = $('#audio').prop('currentTime');
        if (!seeksliding) $('#seekSlider').slider('value', currenttime);
    };

    $('#audio').bind('timeupdate', seekUpdate);

});

Спасибо за Ваш ответ ! :) Но проблема в том, что они уже связаны значением «audio.volume»: html5-плеер по умолчанию автоматически обновляет себя, в отличие от обычного, который после загрузки больше не слушает значение: где мне нужна помощь: /