2013/05/02
jPlayerを使ってみた
次世代のECサイト構築パッケージ「LaunchCart」
でCDの試聴をしたいというご要望を頂き、スマホ対応する必要があったため
jPlayerというjQueryプラグインを使ってみた。
jPlayerを使う理由としては、audioタグだけではデザイン性が担保できないから。
尚、設定については下記サイトを参考にさせていただいた。
http://d.hatena.ne.jp/scientre/20110103/jquery_jplayer
Step 1 環境構築
こちらのサイトからjsとswfをダウンロードする。
また、デモではjQuery1.3.2でやっていたが、エラーが出たので最新版を使う方が良いと思う。
Step 2 HTMLを用意
CSSとJSで変更は可能だが、デザインの調整のみであれば崩す必要はあまりないかも。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <div id="player"> <div class="jp-audio jp-type-single"> <div id="jp-interface" class="jp-interface"> <ul class="jp-controls"> <li><a href="#" class="jp-play" tabindex="1">Play</a></li> <li><a href="#" class="jp-pause" tabindex="1">Pause</a></li> <li><a href="#" class="jp-stop" tabindex="1">Stop</a></li> <li><a href="#" class="jp-mute" tabindex="1">Mute</a></li> <li><a href="#" class="jp-unmute" tabindex="1">Unmute</a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-current-time"></div> <div class="jp-duration"></div> </div> </div> <div id="jplayer" class="jp-jplayer"> </div> </div> |
Step 3 デザイン
以下のような画像を用意する。
※今回は参考サイトのものを流用。
CSSで調整すればデザインを細かく調整できる。
Step 4 javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function() { var mediaList = { "mp3": "/demo/hoshino/37/data/sound.mp3", "ogg": "/demo/hoshino/37/data/sound.oga" }; $('#jplayer').jPlayer({ supplied: "mp3, ogg", solution: "html, flash", swfPath: "/demo/hoshino/37/js", cssSelectorAncestor: "#jp-interface", ready: function() { $(this).jPlayer("setMedia", mediaList); }, }) }); |
mediaListにサウンドファイルを定義する。
あとは同じように書いておけばOK。
注意点としては、いろんな場所でファイルを参照しているようなので
いちいち絶対パスで参照したほうがよい
Author Profile
SHARE
