スポンサーリンク

簡単にウェブサイトに埋め込めるMP3プレイヤー

この記事は約4分で読めます。

イメージ

こんにちは、さち です。

先日の記事「音声素材を電話音声っぽく加工する」で
サンプルのMP3を再生できるように
ウェブページにプレイヤーを埋め込みました。

その時に利用したのが、導入が簡単で見た目もシンプルな
「MP3 Player」というプレイヤーです。

今回は、この「MP3 Player」の導入方法の覚え書きです。
MP3 Plyer には機能が異なるいくつかの種類がありますが
「MAXI」の導入方法について書いていきます。

スポンサーリンク

「MP3 Player」の特徴

私が「MP3 Player」を選んだ理由は次の3つ。

  • とにかく軽い: プレイヤー本体は6.7KB、最軽量verなら2.6KB
  • 導入が簡単: swfファイルだけ準備すればOK
  • カスタマイズ可能: 必要なボタンだけを表示できる

最初は他のプレイヤーを導入しようと思ったのですが
重かったり、導入が面倒だったりと条件が合いませんでした。

使用のための前準備

プレイヤー本体である swfファイル をダウンロードします。

  1. MP3 Player のダウンロードページ にアクセスし
    player_mp3_maxi.swf のリンク上で「右クリック」→「名前を付けてリンク先を保存」。
    (Internet Explorer の場合は「右クリック」→「対象をファイルに保存」)
    操作画面
  2. swfファイル が PC にダウンロードされました。
    操作画面
  3. swfファイル を自分のサーバーにアップロードします。
    操作画面

これで使用のための前準備は完了です。

基本コード

MP3 Player の使用に必要な基本コードは4行のみ。
HTML ファイルに下記のように記述すればOK。

<object type="application/x-shockwave-flash" data="http://example.com/player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="http://example.com/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=http://example.com/sample.mp3" />
</object>

赤字,緑字の部分は自サイトのファイルに書き換えましょう。
赤字は、プレイヤー本体(swfファイル)がある場所
緑字は、再生するMP3ファイルがある場所です。
場所(URL)の記述は絶対パス,相対パスどちらでもよいです。

実際に基本コードのみで設置したプレイヤーはこんな感じ。
再生ボタン,シークバーのみでシンプルです。

プレイヤーをカスタマイズ

プレイヤーの幅,高さの変更などをするには
「name」値が「FlashVars」である <param>タグ の「value」に
カスタマイズ用のコードを追記する必要があります。

追記の際は、value の値の末尾に「&(アンパサンド)」を付け
新たなパラメーターを記述します。

■プレイヤーの幅,高さを変更
例えば、プレイヤーの幅を「320px」に変更する場合は
<object>タグ内の width の値を 320 に変更し
さらに、MP3ファイル指定の後に「&」を付け「width=320」と記述。
高さを変更する場合は同様に「height」を変更,追加すればOK。

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="320" height="20">
<param name="movie" value="player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=sample.mp3&width=320" />
</object>

■ボリュームを設置
MP3ファイル指定の後に「&」を付け「showvolume=1」と記述。
ボリュームの幅,高さは「volumewidth」「volumeheight」
ボリュームの初期値(0~200)は「volume」で指定できます。

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=sample.mp3&showvolume=1&volume=100" />
</object>

他にも様々なパラメーターがあります。
詳細は公式サイトの Documentation を参照して下さい。

MP3 Player 公式サイトはこちらからどうぞ。

   → MP3 Player (英語)

サンプルの音楽にはこちらのものを使わせて頂きました。
ありがとうございました。

   → FM音源風BGM2【ループ対応】 - ニコニ・コモンズ

コメント

  1. ひでた より:

    おせわになりました
    ここがわかりやすかったです、

タイトルとURLをコピーしました