javascript - 使用 jQuery UI 和 jPlayer 控制音频

Question

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

JSFiddle

Answer 1

问题:

由于您为 jp-volume-bar-knob 设置了 position: absolute，因此 ui-slider-horizo​​ntal 栏失去了宽度( slider 滑动的水平条)。

选项 1:

与其将 slider 应用于 jp-volume-bar-knob，不如尝试将其应用于 jp-volume-bar，它似乎工作正常。

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

但是，必须设置初始音量级别和初始 slider 值。

---

选项 2:

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

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

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

---

更新

尝试这样的事情

• 在此音量条工作正常。
• 在 slider 上复制了默认值。

---

$(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-* 的 css，不如将 jquery-ui 的 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/