ここではjQuery音楽再生jPlayerプラグインの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/jplayer/

jPlayerのダウンロード
http://jplayer.org/

skinのダウンロード
https://www.onedesigns.com/freebies/custom-mediaelement-js-skin

headで読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

script

$(document).ready(function(){
    $("#jplayer").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "music.mp3"
            });
        },
        swfPath: "js"
    });
});
</script>

ページ読み込みで自動再生

$(document).ready(function(){
    $("#jplayer").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "music.mp3"
            }).jPlayer("play");
        },
        swfPath: "js"
    });
});

7行目、.jPlayer(“play”);を足すだけで自動再生されます。

停止

$('#jplayer').jPlayer('stop');

html

<!-- 音楽再生 -->
<div id="jplayer" class="jp-jplayer"></div>

headで読み込み -skinを使う場合-

<link rel="stylesheet" href="./skin/style.css" />
<link rel="stylesheet" href="./skin/mediaelementplayer.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./lib/mediaelement.js"></script>
<script src="./lib/mediaelementplayer.js"></script>

script

jQuery(document).ready(function($) {
    $('audio,video').mediaelementplayer({
        videoWidth: '100%',
        videoHeight: '100%',
        audioWidth: '100%',
        features: ['playpause','progress','tracks','volume'],
        videoVolume: 'horizontal'
    });
});

html

<div id="audio-container">
    <audio controls preload="none" src="./LifeGoesOn.mp3"></audio>
</div>