html5 显示多个cue,WordPress添加超酷html5音乐播放器Cue

文件引用、加载

下载之后解压可得cue-html5musicplayer文件夹，

打开它 你会看到functions.cue.php 和 cue文件夹 两个个东东。

1、将functions.cue.php里面的代码复制到你主题的functions.php里面，或者在functions.php中使用include ("functions.cue.php");引用；

2、将cue文件夹复制到主题根目录下

添加歌曲

完成以上1、2步就算成功99%了。剩下的就是新建专辑-添加歌曲链接和名称

最后一步，在WP后台-外观-小工具上可以看到Playlist小工具，将Playlist添加到你的侧栏，填写标题和选择专辑-保存。如此一来，播放器就会在网站显示了，见下图。

当然，若你不想放在小工具，可以使用 <?php cue_playlist($id); ?> 来进行任意位置的调用，其中$id表示专辑id。

为什么播放器不显示或无效？

按上面的步骤添加之后如果网站没有显示播放器可能有以下几种原因：

1、你的主题没有加载jquery库，考虑到99%的主题都会加载jquery库，所以我就把插件中的相关代码精简掉了。如果没有加载jquery库 请自行添加。

2、添加小工具时没有选择音乐专辑。新建专辑之后在侧栏小工具添加时不要忘了选择刚才你新建的专辑名称-然后保存，否则播放器也会不显示。

3、网站加载慢。由于该播放器的js被强制放在了footer.php最后加载，所以如果前面你的网站没有加载完毕(比如；gravatar头像没有加载出来)那么就会影响播放器的加载。

4、在Chromium浏览器(非Chrome)、Mxnitro等类似内核的浏览器下只显示灰色一块无法使用时，请把mediaelement-and-player.min.js单独拿出来在cue.min.js前加载。使用 wp_enqueue_script( 'media', '/wp-includes/js/mediaelement/mediaelement-and-player.min.js' , array(), '', true); 来实现，因为上面的文件js把两者合并在了一起，如果你不介意可以不理会。