検索結果: Atelier

　以前は、同じページ内で、Yahoo! のMedia Playerを使って、mp3ファイルをコントロールすることができた。
　ところが、最近になって、再生ボタンをクリックすると、QuickTime Player が別ページ（別ウインドウ）に立ち上がり再生が始まるようになった。（Windows Media Playerでも再生できるようにできるんだろうが、設定方法がわからない。）

　なんとか、同一ページ内で MP3ファイルを再生できるようにできないかとネットサーチをしてみると、いくつかの方法がみつかった。いずれもFlash Player を使う。
　その中で、Flash-mp3-player.net　が提供している　MP3 Player は、いくつかのパターンが用意されており、ページの　body 部に下のような数行のコードを挿入することで、実現することができる。
　例えば、ツクツクボウシの鳴き声を録音した MP3 ファイルを配置すると次のようになり、再生ボタンをクリックすると、鳴き声が聞こえるようになる。再生中に表示されているポーズ・ボタンをクリックすると、再生が停止する。

　　sample
　

ツクツクボウシの鳴き声

sample の Flash MP3 player のコード


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="25" height="20">
                    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
                    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/atelier/photo_insects/110923_tukutukuhousi.mp3&amp;showslider=0&amp;width=25" />
</object> ツクツクボウシの鳴き声

　再生をしたい MP3 ファイルは、青色文字で表示している。
　このコードは、Flash-mp3-player.net　が提供している mini の MP3 Player の　Generator で作成したコードを、一部修正したものである。今後は、少々面倒であるが、その都度記載することにしたいと思う。

　先日の和泉の国ジャズストリートで録音した飯田宗雪のライブ録音 MP3 ファイルを、同じように、ページ内で再生できるようにしてみた。

沖縄民謡「花」を歌う飯田宗雪

が表示されて、これをクリックすると音が聞こえてくるという JavaScript で作られた del.icio.us/js/playtagger を提供していたサービスページが閉じられてしまった。これは、URL のページHTML コードのどこかに（<head> 部分がリコメンドされているが）次のコードを挿入するだけでよかった。

<script type="text/javascript" src="http://del.icio.us/js/playtagger">

この playtagger という Javascript を運用してくれていたサイトが突如閉鎖したようでリンクが切れてしまった。非常に便利であったので残念である。
　それで、それに代るものをサーチしてみると【How to Embed MP3 Audio Files In Web Pages】というページがヒットした。
ここでは、Google と Yahoo! が提供するサービスが紹介されている。

Google Reader MP3 Player
　再生したい Mp3 ファイルを次のコードの中で指定すれば、ブログの中で MP3 が Windows Media Player などを介さずに再生される。

<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>

　　sample

Yahoo! Media Player
次のコードを URL の<head> 部分にでも一行書き入れ、

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

ブログの文中に、次のように MP3 file を指定すれば良い。del.icio.us/js/playtagger と同じ方式である。ただし、再生ボタンをクリックすると、下のスクリーンショットのような再生画面が表示される。右端の縮小ボタンで折りたためるが。

<a href="http://n-shuhei.net/xxxxx/photo_insects/110923_tukutukuhousi.mp3">ツクツクボウシ</a>

　　sample
ツクツクボウシ

　上記以外にも、カスタマイズすることのできる Flash player　を作成できる【MP3 Player】というサイトも見つかった。上の　Google Rader MP3 Player とここで紹介されている Mp3 Player も Flash を使っている。
flash-mp3-player.net
コード例

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_button.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#0000ff" />
    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" />
</object>

　　sample

　Yahoo! の Javascript 方式を使えば、今までの記述を訂正しなくても良いので、これを使うことにした。Flash Player を使うとすべての MP3 file の記述を書き直す必要がある。Yahoo! なら、そう簡単に閉鎖をすることはあるまいと思っている。

関連エントリー
隠居のスマートフォン備忘録:（3）Xperia acro で音楽(mp3)を楽しむ

Atelierで“MP3 Player”タグの付いているブログ記事

隠居のパソコン備忘録：mp3ファイルをWebページ内で再生する

タグ:

隠居のMovable Type備忘録：ブログの記事に、MP3 Player を埋め込む

タグ: