Question

关于this文章，我正在尝试使用jPlayer创建一个简单的自定义音频播放器。

这是HTML代码

<div id="audio-player">
    <div id="track-info">

    </div>
    <div id="player-buttons">
        <div id="player">
            <div id="playButton" class="button">
                <img id="play-button" src="images/bage-playing.png" />
            </div>
            <div id="pauseButton" class="button">
                <img id="pause-button" src="images/bage-paused.png" />
            </div>
            <div id="stopButton" class="button">
                <img id="stop-button" src="images/bage-busy.png" />
            </div>
        </div>
    </div>
</div><!-- end of audio-player -->

它看起来像这样。

enter image description here

我将以下脚本放在一个单独的JS文件中，并将其与jPlayer的JS文件一起添加到HTML页面的头部。

我的问题是当我运行页面时，按钮消失了！我完全无能为力。

如果有人之前遇到过类似的情况，或者你有什么建议让这种情况发挥作用，我会全力以赴。

谢谢。

Answer 1

如果没有示例网址，我们无法确定这里发生了什么，但要记住以下几点：

使用JPlayer时，一旦使用API的'cssSelectors'属性“绑定”控件，它将使用Javascript DOM方法操作这些控件，并将内联CSS应用于DOM项目。

首先，值得知道JPlayer会在适当的时候隐藏Play和Pause按钮。例如。当曲目正在播放时，它将隐藏播放按钮，当曲目暂停时，它将隐藏播放按钮 - 这可能是您的一些问题的原因。

更有可能的问题是你有按钮的div容器，并指定它们，然后jPlayer清除它们的内容。如果您更改了按钮div中的图像，并在div上使用背景和指定的大小，我怀疑您的代码将起作用。

您的代码如下所示：

<div id="audio-player">
    <div id="track-info">

    </div>
    <div id="player-buttons">
        <div id="player">
            <div id="playButton" class="button">
                <img id="play-button" src="images/bage-playing.png" />
            </div>
            <div id="pauseButton" class="button">
                <img id="pause-button" src="images/bage-paused.png" />
            </div>
            <div id="stopButton" class="button">
                <img id="stop-button" src="images/bage-busy.png" />
            </div>
        </div>
    </div>
</div>

我将其更改为：

<div id="audio-player">
    <div id="track-info">

    </div>
    <div id="player-buttons">
        <div id="player">
            <div id="playButton" class="button">
            </div>
            <div id="pauseButton" class="button">
            </div>
            <div id="stopButton" class="button">
            </div>
        </div>
    </div>
</div>

然后添加一些这样的css来恢复图像：

#playButton {
    background: transparent url('images/bage-playing.png') no-repeat;
    height: 20px; /* Correct this size ;-) */
    width: 20px; /* Also correct this size ;-) */
}

然后为每个按钮执行相同操作，我希望您的代码能够正常工作。如果没有，请回复一个关于你正在做的演示的URL，我会更好看。

欧文

<强>附录：

现在您已经发布了代码，我可以看到两个问题，希望在您修复它们时能够正常运行：

首先，您在javascript中选择的元素不是ID。如果你有'cssSelector'对象，你正在使用的字符串说：

cssSelector: { 
        play: 'playButton',
        pause: 'pauseButton',
        stop: 'stopButton'
    },

他们应该说：

cssSelector: { 
    play: '#playButton',
    pause: '#pauseButton',
    stop: '#stopButton'
},

您的版本会按名称选择元素，而不是ID，例如没有。我猜这是因为你习惯使用document.getElementById，或者是mooTools。

除此之外，JPlayer设置中的“准备好”调用缺少一个功能。它看起来像这样：

ready: jQuery(this).jPlayer("setMedia", { 
                mp3: 'http://www.karolodesign.com/media/music/bass-walker.mp3'
            });

应该是这样的：

ready: function() { // This bit!
            jQuery(this).jPlayer("setMedia", { 
                mp3: 'http://www.karolodesign.com/media/music/bass-walker.mp3'
            });
       }

这是我的错，因为我在网站上的原始示例确实有错！我会马上解决这个问题。

解决这两个问题，应该没问题。 JQuery抛出一个错误，但我认为这只是因为缺少一个函数。如果它不起作用，请告诉我，我会再看看。

欧文

使用jPlayer创建自定义音频播放器

1 个答案: