Question

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

当我们对滑块进行操作时，音频值会自动更改，也会自动更改播放器的值，但是当我们对播放器的滑块执行操作时，使用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');
            },
        });

    });
    });

提前致谢并抱歉我的英语（不是我的母语），的Aurelien

Answer 1

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

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

});

如何自动更新音频滑块jquery ui

1 个答案: