How can i get HTML5 audio playlist with mediaelement.js ?

时光总嘲笑我的痴心妄想 提交于 2019-12-03 15:58:09
Allan

I managed to get a super basic (read: hacky) demo of a playlist working in a WordPress theme I’ve got going. All you have to do is setup multiple media elements using a set of IDs, a class or in this case the <audio> tag.

Then you can use JS to see when a player has ended (stopped playing music) and run some basic conditionals to see which player is playing, what player should play next and if there is no next player, start over from the beginning. Again this is very hacky, but it seems to be working for me.

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();
                }
            }
        }
    }
});

Nope, no playlist. If you looking for player that has one, check here: http://praegnanz.de/html5video/ Also, you can easy make playlist simply by using mediaelementjs JavaScript API. It is pretty simple task, IMO there is no need for extra support for that.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!