mediaelement.jsplaylistplaylists

mediaelement.js and custom playlist


I have such code (for example):

<script>
$('audio').mediaelementplayer();
</script>

<audio id="mejs" controls="controls">
    <source src="/media/file-2.mp3" type="audio/mp3" />
</audio>

<ul class="mejs-list">
    <li>/media/file-1.mp3</li>
    <li class="current">/media/file-2.mp3</li>
    <li>/media/file-3.mp3</li>
</ul>

I need to play audio files from the list by queue (one after another).

How can I change the source of the audio for the next file from the list after finishing playing current file and start playing the next one?

Update: related topic about mediaelement.js and playlist but the answer is about using many mediaelementplayer() instances.


Solution

  • Code for making basic playlist for mediaelement.js:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 MediaElement</title>
    
    <script src="../build/jquery.js"></script>
    <script src="../build/mediaelement-and-player.min.js"></script>
    
    <link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
    
    <style>
        .mejs-list li:hover {
            background: #ffa;
            cursor: pointer;
        }
        .mejs-list li.current {
            background: #cddfff;
        }
    </style>
    
    <script>
        $(function(){
            $('video,audio').mediaelementplayer({
                success: function (mediaElement, domObject) {
                    mediaElement.addEventListener('ended', function (e) {
                        mejsPlayNext(e.target);
                    }, false);
                },
                keyActions: []
            });
    
            $('.mejs-list li').click(function() {
                $(this).addClass('current').siblings().removeClass('current');
                var audio_src = $(this).text();
                $('audio#mejs:first').each(function(){
                    this.player.pause();
                    this.player.setSrc(audio_src);
                    this.player.play();
                });
            });
    
        });
    
        function mejsPlayNext(currentPlayer) {
            if ($('.mejs-list li.current').length > 0){ // get the .current song
                var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
                var audio_src = $(current_item).next().text();
                $(current_item).next().addClass('current').siblings().removeClass('current');
                console.log('if '+audio_src);
            }else{ // if there is no .current class
                var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
                var audio_src = $(current_item).next().text();
                $(current_item).next().addClass('current').siblings().removeClass('current');
                console.log('elseif '+audio_src);
            }
    
            if( $(current_item).is(':last-child') ) { // if it is last - stop playing
                $(current_item).removeClass('current');
            }else{
                currentPlayer.setSrc(audio_src);
                currentPlayer.play();
            }
        }
    </script>
    
    </head>
    
    <body>
    
    <audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
    <ul class="mejs-list">
        <li class="current">../media/audio-01.mp3</li>
        <li>../media/audio-02.mp3</li>
        <li>../media/audio-03.mp3</li>
    </ul>
    
    </body>
    </html>