日本語の曲はフリー・無料の音楽素材「甘茶の音楽工房」から
英語の曲はフリーBGM・音楽素材 MusMusから
$(function(){ $('video,audio').mediaelementplayer({ success: function (mediaElement, domObject) { var audio_src = $("li.current").attr("data-url"); mediaElement.setSrc(audio_src); 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).attr("data-url"); $('audio#mejs:first').each(function(){ this.player.pause(); this.player.setSrc(audio_src); this.player.play(); }); }); }); function mejsPlayNext(currentPlayer) { var next = $('.mejs-list li.current').next(); if (!next.length) next = $('.mejs-list li').first(); next.addClass('current').siblings().removeClass('current'); var audio_src = next.attr("data-url"); currentPlayer.setSrc(audio_src); currentPlayer.play(); }
<ul class="mejs-list"> <audio id="mejs" width="240" src="music/gairotounoakari.mp3" type="audio/mp3" autoplay controls="controls"></audio> <li class="current" data-url="music/gairotounoakari.mp3">街路灯の灯り</li> <li data-url="music/blueneon1.mp3">ブルーネオン1</li> <li data-url="music/blueneon2.mp3">ブルーネオン2</li> <li data-url="music/ophelia.mp3">オフィーリア</li> <li data-url="music/hinokageri.mp3">日の陰り</li> <li data-url="music/hoshinonagare.mp3">星の流れ</li> <li data-url='music/norowaretapiano.mp3'>呪われたピアノ</li> <li data-url='music/ochiba.mp3'>落葉</li> <li data-url='music/serenade.mp3'>セレナード</li> <li data-url='music/shinoobjet.mp3'>死のオブジェ</li> <li data-url='music/sugiyukukisetsu.mp3'>過ぎ行く季節</li> <li data-url='music/yuuguredoki.mp3'>夕暮れ時</li> </ul>