使用 jQuery UI 和 jPlayer 控制音频

Posted 2023-02-25

【中文标题】使用 jQuery UI 和 jPlayer 控制音频

【英文标题】：Controlling audio with jQuery UI and jPlayer

【发布时间】：2015-05-03 17:03:41

【问题描述】：

我正在使用 jPlayer 插件和 jQuery UI 的 slider 小部件。一切似乎都已设置好，但在上下拖动音量时我似乎遇到了一些麻烦。以任何一种方式拖动都会使音量向上/向下跳得太远。该功能是通过slide 属性控制的，我只是不确定如何让它相应地拖动。

JSFiddle

【参考方案1】：

问题：

由于jp-volume-bar-knob 的position: absolute，ui-slider-horizontal 栏失去了宽度（滑块在其上滑动的水平栏）。

选项 1：

不要将滑块应用于jp-volume-bar-knob，而是尝试将其应用于jp-volume-bar，它似乎工作正常。

这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/9co0ac65/2/

但是，必须设置初始音量和初始滑块值。

---

选项 2：

您可以设置以下 css 并仍然将滑块应用于jp-volume-bar-knob

.ui-slider-horizontal
    height: 0;
    border: transparent;
    width: 100%;

这里是演示http://jsfiddle.net/dhirajbodicherla/9co0ac65/3/

---

更新

试试这样的

在这种情况下，音量条可以正常工作。 在滑块上复制默认值。

---

$(document).ready(function () 

    var myPlayer = $("#jquery_jplayer_1"),
        options = 
            ready: function (event) 
                if (event.jPlayer.status.noVolume) 
                    // if there is no volume add custom styling
                
                // Setup the player with media.
                $(this).jPlayer("setMedia", 
                    title: "Bubble",
                    m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                    oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
                );
            ,
            volumechange: function (event) 
                if (event.jPlayer.options.muted) 
                    myControl.volume.slider("value", 0);
                 else 
                    myControl.volume.slider("value", event.jPlayer.options.volume);
                
            ,
            swfPath: "http://jplayer.org/latest/dist/jplayer",
            supplied: "mp3, oga",
            wmode: "window",
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        ,
        myControl = 
            volume: $(".jp-volume-bar-knob")
        ;

    // Instance jPlayer
    myPlayer.jPlayer(options);

    myControl.volume.slider(
        animate: "fast",
        max: 1,
        range: "min",
        step: 0.01,
        value: $.jPlayer.prototype.options.volume,
        slide: function (event, ui) 
            myPlayer.jPlayer("option", "muted", false);
            myPlayer.jPlayer("option", "volume", ui.value);
        
    );
);

我从jplayer demo 采用了这个，并根据问题进行了一些修改。

这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/9co0ac65/6/

---

更新 2

将音量条标记更改为类似的内容

<div class="jp-volume-bar"></div>

不要更改所有 .jp-*'s css，而是将 jquery-ui's css 更改为类似的内容

.ui-slider-horizontal
    background: #444;
    cursor: pointer;
    display: inline-block;
    position: relative;
    height: 4px;
    width: 100px;

.ui-slider-range
    background: #cc181e;

这里是演示http://jsfiddle.net/dhirajbodicherla/9co0ac65/10/

【讨论】：

哇，谢谢！您是否碰巧知道是什么导致旋钮由于变化而向下移动？我尝试改变 css 本身但没有运气。

@CarlEdwards：更新了我的答案，请立即查看

注意到选项 2 的一个小错误。旋钮从零开始，但一旦开始拖动它就会赶上当前音量。它也不会导致当前音量条的最前面。这是因为初始音量和滑块值没有按照您所说的设置吗？

据我观察，ui-slider-horizontal 和红色滑块的宽度似乎不同。让我再看一遍。

唯一奇怪的是，在加载时，旋钮在当前音量之后开始。你也看到了吗？