MediaElementJSの使い方

日本語の曲はフリー・無料の音楽素材「甘茶の音楽工房」から

英語の曲はフリー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>
			
ページトップへ戻る