jPlayer + Bootstrapでさくっと音声の再生プレイヤーを実装する

動画をページ上で再生させる場合、ほとんどのケースでYoutubeなどの動画共有サイトを利用するため、埋め込みプレイヤーも簡単に実装できるのですが、mp3などの音声データをさくっと埋め込む手軽な方法がなかったので、作ってみました。

デモ

使用するもの

• jQuery
• Bootstrap
• jPlayer

jPlayerはHTML5、Flashを使用してmp3、mp4、ogg、wavなどの再生に対応しています。

実装

ダウンロードしたjPlayerのJSファイルとswfファイルを以下のような構造で配置したとします。

js/
    jquery.jplayer.min.js
swf/
    Jplayer.swf
index.html

CSSには以下のように記述します。
今回は音声ファイルしか扱わない前提で、最低限のスタイルのみ定義しています。

<style type="text/css">
	div.jp-audio {
		.box-shadow(0 1px 1px rgba(0,0,0,0.05));
		border: 1px solid #DDD;
		border-radius: 4px;
		padding: 9px;
		background: #FFF;
	}

	div.jp-interface {
		width: 190px;
		margin: 0 auto;
	}

	div.jp-interface ul.jp-controls {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	div.jp-interface ul.jp-controls > li {
		float: left;
	}

	div.jp-interface a.jp-btn {
		display: block;
		line-height: 30px;
		text-align: center;
	}

	div.jp-interface ul.jp-controls a.jp-btn {
		width: 30px;
	}

	div.jp-interface a.jp-btn:hover,
	div.jp-interface a.jp-btn:focus {
		text-decoration: none;
	}

	div.jp-volume-bar {
		overflow: hidden;
		background: #DDD;
		width: 46px;
		height: 5px;
		cursor: pointer;
		margin: 12.5px 12px;
	}

	div.jp-volume-bar-value {
		background: #428bca;
		width: 0px;
		height: 5px;
	}

	div.jp-current-time,
	div.jp-duration {
		font-size: 11px;
		line-height: 30px;
	}

	div.jp-progress {
		overflow: hidden;
		width:186px;
		height:15px;
		margin: 2px 0;
	}

	div.jp-seek-bar {
		background: #DDD;
		width: 0px;
		height: 100%;
		cursor: pointer;
	}

	div.jp-play-bar {
		background: #428bca;
		width: 0px;
		height: 100%;
	}

	div.jp-seeking-bg {
		background: #AAA;
	}

	div.jp-jplayer audio,
	div.jp-jplayer {
		width:0px;
		height:0px;
	}

	div.jp-jplayer {
		background-color: #000000;
	}

	.jp-no-solution {
		padding:5px;
		font-size:.8em;
		background-color:#eee;
		border:2px solid #009be3;
		color:#000;
		display:none;
	}

	.jp-no-solution a {
		color: #000;
	}

	.jp-no-solution span {
		font-size: 1em;
		display: block;
		text-align: center;
		font-weight: bold;
	}
</style>

あとは、プレイヤーをHTMLに記述するだけ。

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-gui jp-interface">
        <div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div>
        <div class="row">
            <div class="col-xs-4 jp-current-time"></div>
            <div class="col-xs-4 text-center">
                <a href="#" class="jp-btn jp-repeat" tabindex="1" title="繰り返しオン"><span class="glyphicon glyphicon-repeat text-muted"></span></a>
                <a href="#" class="jp-btn jp-repeat-off" tabindex="1" title="繰り返しオフ"><span class="glyphicon glyphicon-repeat"></span></a>
            </div>
            <div class="col-xs-4 text-right jp-duration"></div>
        </div>
        <ul class="jp-controls">
            <li><a href="#" class="jp-btn jp-play" tabindex="1" title="再生"><span class="glyphicon glyphicon-play"></span></a></li>
            <li><a href="#" class="jp-btn jp-pause" tabindex="1" title="一時停止"><span class="glyphicon glyphicon-pause"></span></a></li>
            <li><a href="#" class="jp-btn jp-stop" tabindex="1" title="停止"><span class="glyphicon glyphicon-stop"></span></a></li>
            <li><a href="#" class="jp-btn jp-mute" tabindex="1" title="ミュート"><span class="glyphicon glyphicon-volume-off text-muted"></span></a></li>
            <li><a href="#" class="jp-btn jp-unmute" tabindex="1" title="ミュート解除"><span class="glyphicon glyphicon-volume-off"></span></a></li>
            <li><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></li>
            <li><a href="#" class="jp-btn jp-volume-max" tabindex="1" title="最大音量"><span class="glyphicon glyphicon-volume-up"></span></a></li>
        </ul>
    </div>
    <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jplayer.min.js"></script>
    
<script type="text/javascript">
	$(document).ready(function(){
		$("#jquery_jplayer_1").jPlayer({
			ready: function () {
				$(this).jPlayer("setMedia", {
					m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
					oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
				});
			},
			swfPath: "swf/Jplayer.swf",
			supplied: "m4a, oga",
			wmode: "window",
			keyEnabled: true
		});
	});
</script>