使用 jQuery UI 和 jPlayer 控制音频

Question

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

JSFiddle

Answer 1

问题：

由于 position: absolute 对应 jp-volume-bar-knob，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/

使用 jQuery UI 和 jPlayer 控制音频

Controlling audio with jQuery UI and jPlayer

javascript

audio

jquery

jquery-ui

jplayer

更新

更新 2