ホーム > jquery

jqueryのアーカイブ

jqueryを利用したシンプルなmp3プレイヤー





jqueryプラグインのjMP3を使用したMP3プレイヤーを設置する方法を解説します。

といっても、このjMP3というプラグインは実はMP3プレイヤーとしての機能はなく、
実際は、jMP3からsinglemp3playerというFLASH swfファイルのmp3プレイヤーを使用します。
singlemp3player.swfだけでも機能としては十分ですが、複数設置する場合便利になります。

singlemp3playerは、設定によって、mp3ファイルを左クリックでダウンロードさせることができます。
HTMLでmp3ファイルに直リンクした場合、左クリックすると設定してある音楽プレイヤーが起動してしまうため、
「右クリック」→「名前を付けてリンク先を保存」といったこと(あるいはその注意書き)が必要になります。
そこを解消してくれるので、「試聴→ダウンロード」をPCにあまり詳しくない方でも簡単にできる仕様になるかと思います。

singlemp3playerサンプルページ
※自動再生ONに設定しているものがあるので音が鳴ります


基本的には、jMP3本家サイトJavaScript+Ajax実戦サンプル集に記述されている通りなのですが、 個人的にデザインが気に入らなかったり等あったので少しいじりました。
なので、以下に記述したダウンロード先は、オリジナルファイルではなく個人的に用意したものになります。


1.singlemp3playerの設置

  1. singlemp3playerをダウンロードして、singlemp3player.swfファイルをサーバーにアップロードします。
    ※flaファイルも同梱しているので、デザインいじりたい方もこちらからダウンロードしてください。

    -singlemp3playerの初期設定値

    • 自動再生なし
    • リピート再生なし
    • ボタン色 #333333
    • ダウンロードボタン表示

    -従来の(?)singlemp3playerからの変更点

    • 全体的なデザイン
    • 背景色を指定しなかった場合、背景を透過
    • 枠線の色指定で枠を表示

2. jMP3の設定

  1. jMP3をダウンロードします。
  2. singlemp3player.swfを置いたフォルダへのパスを通します。(33行目)
    var playerpath = "/media/flash/";
  3. 初期設定をします。(36行目~46行目)
    HTML側で設定しなかった場合、ここの設定が適用されます。基本的にはいじる必要はないと思います。
    var options = {
    	"filepath": "",			// mp3ファイルのフォルダへのパス
    	"backcolor": "",		// 背景色
    	"forecolor": "",		// ボタン部分の色
    	"linecolor": "",		// 枠の色
    	"width": "25",			// 幅
    	"repeat": "no",			// リピート設定
    	"volume": "50",			// 音量
    	"autoplay": "false",	// 読み込み時の自動再生
    	"showdownload": "true",	// ダウンロードボタンの表示
    	"showfilename": "true"	// ファイル名の表示
    };
  4. jquery.jmp3.jsをサーバーにアップロードします。

3. HTMLの記述

  1. jqueryのライブラリにパスを通します。(<head>タグ内)
  2. jMP3のパスを通し、設定をします。(<head>タグ内)前述したjMP3の設定で記述した項目は全て設定できます。
    
    
    
    上記4行目の「$(“.mp3file”)」で、jMP3を適用させるタグを設定します。
    ここでは.mp3fileと設定しているので、class=”mp3file”としたところ全てに適用されます。

  3. MP3プレイヤーを表示させたい箇所にタグを記述します。
    <span class="mp3file">sound.mp3</span>


ホーム > jquery

検索
フィード
メタ情報

ページの上部に戻る