<a title="iBITE 2.0 (pro)" href="http://flickr.com/photos/14684343@N00/356761118/" onclick="window.open('http://flickr.com/photos/14684343@N00/356761118/'); return false;"><img alt="音声ファイルをサイトで再生" src="http://web-marketing.zako.org/images/pod-casting.jpg" width="250" height="192" /></a>
<p>ポッドキャスティング、まだまだこれからではあると思いますが、様々なサイトで配信され始めてますよね。　今回は<a rel="nofollow" class="web-site-link" href="http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/" onclick="window.open('http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/'); return false;">Digital Inspiration</a>のエントリより、カンタンにサイトへオーディオファイルを埋め込める4つのプレイヤーをご紹介。</p>

<!--more-->
<h3 class="header-label">MP3ファイルをサイト上でカンタンに再生できる埋め込みプレイヤー</h3>

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

<h3 class="header-label">1. Google Reader MP3 Player</h3>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://zako.sakura.ne.jp/audio/mp3/02-fergie-clumsy.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
<p>これはGoogleリーダー用のMP3プレイヤーなのですが、ちょっとした裏技でサイトに埋め込めてしまうもの。音量調節が細かく効くのでユーザービリティ的にはいいかも。</p>
<h4 class="question">Google Reader MP3 Playerの埋め込みソースコード</h4>
<textarea name="code" class="xml" cols="60" rows="25" id="code">
<embed type="application/x-shockwave-flash" flashvars="audioUrl=「MP3ファイルのURL」" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</textarea>
<p>※URLを入れる必要があるので注意。</p>

<h3 class="header-label"><del datetime="2012-07-01T06:35:06+00:00">2. Yahoo! MP3 Player</del></h3>
<p class="desc">※現在ご利用いただけません。利用できる方法を調査中です。（2012/07/01）</p>
<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=http://zako.sakura.ne.jp/audio/mp3/02-fergie-clumsy.mp3&amp;skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />
<p>ファイル名を表示できるところが◎、ファイル名を「audio-file.mp3」としておけば「audio file」と表示されるような感じ。</p>
<h4 class="question">Yahoo! MP3 Playerの埋め込み用ソースコード</h4>
<textarea name="code" class="xml" cols="60" rows="30" id="code"><embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=「MP3ファイルのURL」&amp;skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" /></textarea>

<h4 class="header-label">3. Yahoo! Media Player</h4>
<p class="desc"><a href="http://zako.sakura.ne.jp/audio/mp3/02-fergie-clumsy.mp3">ここをクリックすると再生</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<p>これはページ内にJavascript外部ファイルを読み込むコードを書いておけば、MP3ファイルへのリンクを貼っただけで再生ボタンを表示してくれるもの。テンプレートに書いておけば、リンクを貼るだけでプレイヤーを表示できるので効率的ですよね。再生ボタンを押して表示されるプレイヤーもなかなかクールです。</p>

<h4 class="question">Yahoo! Media Playerのソースコード</h4>
<textarea name="code" class="xml" cols="60" rows="30" id="code"><script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script></textarea>
<p>このコードをプレイボタンを表示させたいページに書いておけばOK。あとはMP3ファイルへのリンクを貼るだけです。</p>

<h3 class="header-label"><del datetime="2012-07-01T06:35:06+00:00">4. Odeo MP3 Player</del></h3>
<p class="desc">※現在サービスリニューアル中で一時的にご利用いただけなくなっています。（2012/07/01）</p>
<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&amp;external_url=http://zako.sakura.ne.jp/audio/mp3/02-fergie-clumsy.mp3" />
<p>シンプルだけど、見た目がちょっとかわいい。という人におすすめ。</p>
<h4 class="question">Odeo MP3 Playerの埋め込み用ソースコード</h4>
<textarea name="code" class="xml" cols="60" rows="40" id="code"><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&amp;external_url=「MP3ファイルのURL」" /></textarea>

<p>しかし、リッチコンテンツが求められるようになると、画像の容量だけでヒーヒー言っている場合じゃなくなってきますよね。大規模サイトのサーバー構成案や見積もりを見ているとヒシヒシとそれが伝わってきます。。。</p>
<p>個人サイトだからリスクヘッジの部分を安価にしたとしても、ディスク容量でレンタルサーバーのコストがアップするのは厳しいですよね。　日本でも<a href="http://web-marketing.zako.org/web-tools/adrive-50gb-free-online-data-storage-community.html">ストレージサービス</a>への規制を緩和してくれなければなかなか難しいのかもしれません。</p>

<h4 class="header-label">関連情報</h4>
<ul>
<li>Via：<a class="web-site-link" href="http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/" onclick="window.open('http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/'); return false;">How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player</a></li>
<li><a href="http://web-marketing.zako.org/web-tools/" onclick="javascript:urchinTracker('/go/Under_link');" onkeypress="return hs.expand(this)">クールなWEBツール</a></li>
</ul>

<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>