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

Posted

技术标签:

【中文标题】使用 jPlayer 创建自定义音频播放器【英文标题】:Creating a custom audio player with jPlayer 【发布时间】:2012-11-22 16:26:00 【问题描述】:

按照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 -->  

它看起来像这样。

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

我的问题是当我运行页面时,按钮消失了!我完全不知道是什么原因造成的。

如果有人以前遇到过类似的情况,或者如果您有任何建议来解决这个问题,我会全力以赴。

谢谢。

【问题讨论】:

【参考方案1】:

如果没有示例 URL,则无法确定此处发生的情况,但需要牢记以下几点:

使用 JPlayer 时,一旦您使用 API 的“cssSelectors”属性“绑定”了控件,它将使用 javascript DOM 方法以及通过将内联 CSS 应用于 DOM 项来操作这些控件本身。

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

更可能的问题是您有按钮的 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 抛出错误,但我认为这只是因为缺少函数。如果它不起作用,请告诉我,我再看看。

欧文

【讨论】:

首先,非常感谢您快速回复我!我按照您的指示更改了 HTML,并通过 CSS 添加了图像,但无济于事。我已将所有内容上传到here 查看我的答案,希望它能解决您的问题。 感谢您指出这些错误,欧文。我更新了我的代码,但播放器仍然没有出现在页面上!我已经上传了我所有的文件here。我认为您可以更轻松地查看代码和所有内容。请下载并查看。再次感谢。 :)

以上是关于使用 jPlayer 创建自定义音频播放器的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jPlayer 在所有页面上连续播放音频?

JPlayer 音频问题

jPlayer 不会在 iPad 中自动播放音频文件

基于jQuery的视频和音频播放器jPlayer

jplayer 多个实例一页 - 但是数量是可变的

如何在点击时在 jPlayer 中播放链接到的音频文件?