Geek Answers Handbook

MediaElement.js + jquery with improved playlist (hopefully)

My javascript framework: jquery 1.8.3

Using mediaelement.js and a playlist to play sound (from this topic) mediaelement.js and a custom playlist

I tried to figure out how to change the script (below) to use this kind of list

<ul class="mejs-list"> <li class="current"><a href="/media/file-1.mp3">Nice Name for file1</a> other random text or html/img, file description etc </li> <li><a href="/media/file-2.mp3">Nice Name for file2</a>other text or html/img</li> <li><a href="/media/file-3.mp3">Nice Name for file3</a>other text or html/img</li> </ul>

instead of this

 <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>

this script turns this list into a playlist and works very well, but it creates links showing the full path, I prefer to grab src from the link, and not just the text inside li, so I can use more convenient names.

 <script> $(function(){ $('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>

If this is the best way to do this using jquery and mediaelement.js, I am open to suggestions.

ps It would also be a plus if I had previous and next links to tracks, but this was not required.

+4
source share
2 answers

Think about it and post the answer for everyone.

HTML

 <audio id="mejs" src="track1.mp3" type="audio/mp3" controls></audio> <ul class="mejs-list"> <li id="track1.mp3">Track1</li> <li id="track2.mp3">Track2</li> <li id="track3.mp3">Track3</li> </ul>

Javascript

  <script> $(function(){ $('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.id; $('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.match('http.*\.mp3')); currentPlayer.play(); } } </script>

NOTE: this dose does not check HTML standerds (WC3), but the dose works, tested by Chrome, Safari, Firefox on Mac, latest versions. Still looking for a version compatible with HTML for checking.

+2
source

I think it should be

  $(current_item).next().attr('id');

in the mejsPlayNext function.

  <script> $(function(){ $('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.id; $('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().attr('id'); $(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().attr('id'); $(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.match('http.*\.mp3')); currentPlayer.play(); } } </script>
0
source

More articles:


All Articles