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

原文 标签 jquery html jquery-ui audio slider

我正在寻求帮助,因为我目前被困在一个脚本上。
让我解释一下:我在一个页面上有一个 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');
            },
        });

    });
    });

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

最佳答案

我认为您只需要将值在两个方向上绑定(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);

});

关于jquery - 如何自动更新音频 slider jquery ui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23405835/

相关文章:

javascript - 单击时从jquery可排序列表中删除一个元素

javascript - 识别句子中的回文

javascript - 有了HTML表格,如何在使用HTML,CSS和JavaScript的特定行之间切换?

php - PHP中具有相同名称的不同元素

html - FB Like and Share按钮位于固定位置的div前面

javascript - jQuery:创建一个圆形 slider

javascript - 在我的手指已经在屏幕上之后,如何在添加到 DOM 的元素上捕获 touchmove 事件?

jQuery DataTable - 可见列

javascript - 当 body 使用 Fullpage.js 有一个类时隐藏或显示元素

jquery - 将选项附加到选择,使用 jQuery,调整它的大小?