Question

我的页面中有一个使用jPlayer的修改过的播放器，我想将自定义滚轮按钮绑定到音量功能：

$musicPlayer.jPlayer({
                            swfPath: "js/jplayer/",
                            solution: 'flash,html',
                            supplied: 'm4a, oga, mp3',
                            preload: 'metadata',
                            volume: 0.8,
                            muted: false,
                            cssSelectorAncestor: "#jp_container_N",
                            cssSelector: {
                                play: '.jp-play',
                                pause: '.jp-pause',
                                seekBar: '.jp-seek-bar',
                                playBar: '.jp-play-bar',
                            },
                            errorAlerts: false,
                            warningAlerts: false,
                            ready: function () {
                              $(this).jPlayer("setMedia", {
                                mp3: $first_song,
                                solution: 'flash, html',
                              });
                            },
                        }).bind($.jPlayer.event.ended, function(event){
                            var $o = $('.selected').next('li'),$json = $.parseJSON($o.find('img').attr('data-src'));
                            if(!$o.is(':last')){
                                playSong($o,$json);
                            }
                        });

                });

自定义音量滚轮：

//js code for the metal style wheel - below

        $('#metal .indicator-cw').bind('touchmove', function(event){
            updateMetal();
        });
        $("#metal .indicator-cw").mousemove(updateMetal);

        function updateMetal(){
    var number = $("#metal .result-cw").text();
    var Degrees = parseInt(number);

    $("#rotateit").css({'transform':'rotate(' + (Degrees) + 'deg)', '-webkit-transform':'rotate(' + (Degrees) + 'deg)', '-o-transform':'rotate(' + (Degrees) + 'deg)', '-moz-transform':'rotate(' + (Degrees) + 'deg)', '-ms-transform':'rotate(' + (Degrees) + 'deg)' });

        }
        //js code for the metal style wheel - above

HTML：

<div id="metal">
        <div class="result-cw"></div>
        <div class="indicator-cw1"><img src="img/metal_indicator.png" id="rotateit" class="indicator-cw-img" /></div>
        <div class="indicator-cw"></div>
    </div>

如何将jPlayer音量指定给该滚轮按钮？

Answer 1

在jPlayer documentation中，您可以读到jPlayer的API具有卷处理功能。

您所要做的就是将旋转度转换为0到1之间的数字。由于360度是最大值，您所要做的就是将当前旋转度乘以（1/360）并且将其作为参数传递给volume方法。

在您的示例中，它将类似于：

var vol = parseInt($("#metal .result-cw").text()) * (1/360);    
$("#player").jPlayer("volume", vol);

将jPlayer卷分配给自定义按钮

1 个答案: