我尝试在 mediaelement.js 中搜索音频播放列表的示例。但我没有找到,mediaelement.js 支持音频播放列表吗?如果是这样,请支持我的示例代码或链接。非常感谢。
我设法获得了一个超级基本(阅读:hacky)的播放列表演示,该演示在我正在使用的 WordPress 主题中运行。您所要做的就是使用一组 ID、一个类或在本例中设置多个媒体元素<audio>
tag.
然后,您可以使用 JS 查看播放器何时结束(停止播放音乐)并运行一些基本条件来查看哪个播放器正在播放、下一个播放器应该播放什么以及如果没有下一个播放器,则从头开始。这又很hacky,但它似乎对我有用。
HTML:
<figure class="entry-audio">
<audio id="wp_mep_1" controls="controls">
<source src="linkto/music.mp3" type="audio/mp3" />
<object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=linkto/music.mp3" />
</object>
</audio>
</figure>
<!-- .entry-audio -->
<figure class="entry-audio">
<audio id="wp_mep_2" controls="controls">
<source src="linkto/music.mp3" type="audio/mp3" />
<object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=linkto/music.mp3" />
</object>
</audio>
</figure>
<!-- .entry-audio -->
<figure class="entry-audio">
<audio id="wp_mep_3" controls="controls">
<source src="linkto/music.mp3" type="audio/mp3" />
<object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=linkto/music.mp3" />
</object>
</audio>
</figure>
<!-- .entry-audio -->
JavaScript:
jQuery(function (jQuery) {
// make an array for the mediaelement players
var mediaElementPlayers = new Array();
// run mediaelement.js (Ignore options)
jQuery('audio').mediaelementplayer({
iPadUseNativeControls: false,
iPhoneUseNativeControls: false,
AndroidUseNativeControls: false,
pauseOtherPlayers: true,
success: function (mediaElement, domObject) {
// add this mediaelement to the mediaElementPlayers array
mediaElementPlayers.push(mediaElement);
console.log(mediaElement);
mediaElement.addEventListener('ended', function (e) {
playNext(e.target);
}, false);
},
keyActions: []
})
// find the current player and start playing the following player
function playNext(currentPlayer) {
for (i = 0; i < mediaElementPlayers.length; i++) {
if (mediaElementPlayers[i] == currentPlayer) {
if (mediaElementPlayers[i + 1] == undefined) { // If this is the last player Start from the beginning
mediaElementPlayers[0].play();
} else { // Start the next player
mediaElementPlayers[i + 1].play();
}
}
}
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)