gpt4 book ai didi

mediaelement.js - 如何使用 mediaelement.js 获取 HTML5 音频播放列表?

转载 作者:行者123 更新时间:2023-12-04 18:50:51 27 4
gpt4 key购买 nike

我试图在 mediaelement.js 中搜索音频播放列表的示例。但我没有发现,mediaelement.js 支持音频播放列表吗?如果是这样,请支持我提供示例代码或链接。非常感谢。

最佳答案

我设法获得了一个在 WordPress 主题中工作的播放列表的 super 基本(阅读:hacky)演示。您所要做的就是使用一组 ID、一个类或在这种情况下使用 <audio> 设置多个媒体元素。标签。

然后您可以使用 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&amp;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&amp;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&amp;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();
}
}
}
}
});

关于mediaelement.js - 如何使用 mediaelement.js 获取 HTML5 音频播放列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6395265/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com