使用 jQuery UI 和 jPlayer 控制音频

Question

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

JSFiddle

Answer 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/