ミッションたぶんPossible

どこにでもいるシステムエンジニアのなんでもない日記です。たぶん。

jQueryプラグインを使って音楽プレイヤーにチャレンジ

Chrome拡張



　ちょっと動きのあるものが作りたくて、jQueryプラグインでなんか面白いの無いかなぁと探してたら、こんなのを見つけました。


jPlayer : HTML5 Audio & Video for jQuery


　HTML5のaudioに対応してない場合にはSWFファイルを使って音楽再生するみたいですね。今回はChrome拡張だからHTML5対応は気にせず、楽曲ファイルのフォーマットもmp3のみに絞って手っ取り早くやってみました。

popup.html

<html>
<head>
	<script type="text/javascript" src="jquery-1.6.2.js"></script>
	<script type="text/javascript" src="music.js"></script>
</head>
<body>
	<div id="player">
		<audio controls>
			<source src="sweet_magic.mp3" type="audio/mpeg">
			<a href="sweet_magic.mp3" rel="audio">Play</a>
		</audio>
	</div>
</html>


music.js

$(function() {
	$("#player").jPlayer({
		swfPath:"/Users/youichi_takigawa/Documents/ChromeEx/Music_Player",
		ready:function() {
			$(this).jPlayer("setMedia", {
				mp3:"sweet_magic.mp3"
			}).jPlayer("play");
		}
	});
});


manifest.json

{
	"name":"Music Player",
	"version":"1.0",
	"description":"習作：音楽プレイヤー",
	"browser_action":{
		"default_icon":"music.png",
		"popup":"popup.html"
	},
	"permission":[
	]
}


　簡単過ぎワロタwww。ちなみにポップアップで拡張機能を表示してるうちは良いんですが、隠れちゃうと再生してた曲が止まっちゃうので音楽プレイヤーとしてはダメダメですねw。そのうち本格対応してみます。今日はこれで満足♬


　おまけ。今回プレイヤーに利用した楽曲はこちら。