あなたのサイトでカンタンに音声を再生できる4つの埋め込みプレイヤー。ブログやサイトで埋め込み mp3を実現してくれるサービス。…

あなたのサイトでカンタンに音声を再生できる4つの埋め込みプレイヤー

ポッドキャスティング、まだまだこれからではあると思いますが、様々なサイトで配信され始めてますよね。　今回はDigital Inspirationのエントリより、カンタンにサイトへオーディオファイルを埋め込める4つのプレイヤーをご紹介。

• 
• 【i2i】モバイル対応アクセス解析を無料レンタル！
• 名刺作成を業界最安値しかもオリジナルデザインでやってのけます。
• このブログをRSSリーダーで購読

MP3ファイルをサイト上でカンタンに再生できる埋め込みプレイヤー

いずれのプレイヤーも、ソースコード中の”「MP3ファイルのURL」”（鍵カッコまでを含む）をファイルのURLに置き換えればカンタンに設置することができます。

1. Google Reader MP3 Player

これはGoogleリーダー用のMP3プレイヤーなのですが、ちょっとした裏技でサイトに埋め込めてしまうもの。ちょっとコードが長めなんだけど、音量調節が細かく効くのでユーザービリティ的にはいいかも。

Google Reader MP3 Playerの埋め込みソースコード

<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="27" width="400" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param name="_cx" value="10583"> <param name="_cy" value="714"> <param name="FlashVars" value=""> <param name="Movie" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.labnol.org/assets/mp3/unofficial-yahoo-song.mp3"> <param name="Src" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=「MP3ファイルのURL」"> <param name="WMode" value="Window"> <param name="Play" value="0"> <param name="Loop" value="-1"> <param name="Quality" value="High"> <param name="SAlign" value="LT"> <param name="Menu" value="-1"> <param name="Base" value=""> <param name="AllowScriptAccess" value="never"> <param name="Scale" value="NoScale"> <param name="DeviceFont" value="0"> <param name="EmbedMovie" value="0"> <param name="BGColor" value=""> <param name="SWRemote" value=""> <param name="MovieData" value=""> <param name="SeamlessTabbing" value="1"> <param name="Profile" value="0"> <param name="ProfileAddress" value=""> <param name="ProfilePort" value="0"> <param name="AllowNetworking" value="all"> <param name="AllowFullScreen" value="false"> <embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=「MP3ファイルのURL」" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" pluginspage="http://www.macromedia.com/go/getflashplayer" height="27" width="400"></object>

※2箇所にURLを入れる必要があるので注意。

2. Yahoo! MP3 Player

ファイル名を表示できるところが◎、ファイル名を「audio-file.mp3」としておけば「audio file」と表示されるような感じ。

Yahoo! MP3 Playerの埋め込み用ソースコード

<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=「MP3ファイルのURL」&skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />

3. Yahoo! Media Player

02-fergie-clumsy

これはページ内にJavascript外部ファイルを読み込むコードを書いておけば、MP3ファイルへのリンクを貼っただけで再生ボタンを表示してくれるもの。テンプレートに書いておけば、リンクを貼るだけでプレイヤーを表示できるので効率的ですよね。再生ボタンを押して表示されるプレイヤーもなかなかクールです。

Yahoo! Media Playerのソースコード

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

このコードをプレイボタンを表示させたいページに書いておけばOK。あとはMP3ファイルへのリンクを貼るだけです。

4. Odeo MP3 Player

シンプルだけど、見た目がちょっとかわいい。という人におすすめ。

Odeo MP3 Playerの埋め込み用ソースコード

<embed type="application/x-shockwave-flash" src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURATION&external_url=「MP3ファイルのURL」" />

しかし、リッチコンテンツが求められるようになると、画像の容量だけでヒーヒー言っている場合じゃなくなってきますよね。大規模サイトのサーバー構成案や見積もりを見ているとヒシヒシとそれが伝わってきます。。。

個人サイトだからリスクヘッジの部分を安価にしたとしても、ディスク容量でレンタルサーバーのコストがアップするのは厳しいですよね。　日本でもストレージサービスへの規制を緩和してくれなければなかなか難しいのかもしれません。

関連情報

• Via：How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player
• クールなWEBツール

関連記事

• MP3ファイルの音量を4段階で大きくしてくれる「vloud」 ログイン不要
• YouTubeの検索結果URLからポッドキャスティングできる「vixy.net」
• 無料アクセス解析ツール「Woopra」のダウンロード版がすごすぎる
• 夢も視覚化 WEBから美しいスクラップブックをサクッと作れる「Ript 」
• アイデアをすぐに書き留めよう！リマインダーツール「LessMemories」

• 前の記事： パスポート用の証明写真ジェネレーター「ePassportPhoto」
• 次の記事： Wonderbraの妄想を掻き立てさせるセクシー広告まとめ
• ジャンル： mp3, WEBツール, ポッドキャスティング, ポッドキャスト, 便利ツール, 埋め込み

参考になる書籍