Blog

jPlayerを使ってみた

次世代のECサイト構築パッケージ「LaunchCart

でCDの試聴をしたいというご要望を頂き、スマホ対応する必要があったため

jPlayerというjQueryプラグインを使ってみた。

jPlayerを使う理由としては、audioタグだけではデザイン性が担保できないから。

尚、設定については下記サイトを参考にさせていただいた。

http://d.hatena.ne.jp/scientre/20110103/jquery_jplayer

 

デモ

 

Step 1 環境構築

http://www.jplayer.org/

こちらのサイトからjsとswfをダウンロードする。

また、デモではjQuery1.3.2でやっていたが、エラーが出たので最新版を使う方が良いと思う。

 

Step 2 HTMLを用意

CSSとJSで変更は可能だが、デザインの調整のみであれば崩す必要はあまりないかも。

 

Step 3 デザイン

以下のような画像を用意する。

※今回は参考サイトのものを流用。

 

CSSで調整すればデザインを細かく調整できる。

プレーヤー画像

 

Step 4 javascript

mediaListにサウンドファイルを定義する。

あとは同じように書いておけばOK。

 

注意点としては、いろんな場所でファイルを参照しているようなので

いちいち絶対パスで参照したほうがよい

 

Author Profile

hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ