jquery - 如何自动更新音频 slider jquery ui

Question

我正在寻求帮助，因为我目前被困在一个脚本上。
让我解释一下:我在一个页面上有一个 html5 音频播放器，以及一个作用于值“id”.audio 的 slider ，使用 jquery ui 库制作..

当我们对 slider 进行操作时，音频值会自动更改，播放器的值也会自动更改，但是当我们对播放器的 slider 进行操作时，使用 jquery 实现的( slider )不会更改，除非您在加载之前更改值剧本 ...
总之，我想知道如何使 slider 自动更新，具体取决于 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');
            },
        });

    });
    });

在此先感谢并为我的英语(不是我的母语)感到抱歉，
奥雷连

Answer 1

我认为您只需要将值在两个方向上绑定(bind)在一起，这是一个基于我一直在研究的视频播放器的简单示例。

Working Example

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

});