プレイヤーをページに埋め込む - スマラジ屋

プレイヤーをページに埋め込む

―　何故わざわざこんなめんどくさいことをするのかって？
　　　　　　　　　　　　　　　　　　　　　　　　　　　なんとなくです。　ゾーラ２　―

(⊙∀⊙)ねとらじはURLを公開すれば誰でもねとらじを聞けるのに、
なぜかHTMLにプレイヤーを埋め込んで
ブラウザ上でねとらじを聞けるようにしてしまおう、と思い立ったゾーラ２さんは、
早速インターネットのヤホーでやり方を調べることにしました。　うん、ヤフーね(ﾟｗﾟ

(⊙∀⊙)というわけで、完成形がこちらです　いきなり完成形かよ(ﾟдﾟ
右クリックでhtmlとして保存するか、ソースを丸々コピペしてしまうべし。
あ、言い忘れてましたが、ここで使用するプレイヤーは
Windows Media Player(以下WMP)です。
一応RealPlayerやQuickTimeも埋め込めるんだけど、
やった事が無いので解説できない、と言う罠。

気を取り直して。
ブラウザ上でねとらじを聞けるようにするために変更すべき項目なんですが、
基本的には2ヶ所だけ変更すればです。
とりあえずソースを開いて、9行目と13行目にある
http：//203.131.199.132:8000/.m3uと言う部分を、
自分のねとらじのURLに書き換えてください。
URLはねとレボの画面下部から確認できます。

書き換えが終わったら、これを自分のホームページのサーバーに上げればもう終わり。
ブラウザ上でねとらじを再生することが出来ます。
再生できない場合、URLが間違っていたり、2ヶ所とも変更していないか、
パソコンにWMPがインストールされていないかったり、
そもそも使ってるOSがWMPをサポートしてなかったりする場合。
パソコンにインストールされて無い場合はちゃんとDL出来るようにガイドしてくれるはずだけど。

一応これで聞けるようになったら成功なわけですが、
他にカスタマイズできる部分をいくつか。

• 8行目＆13行目：width="426" height="68"

　　　これは埋め込んだプレイヤーの横幅と縦幅の数値です。
　　　単位はpx(ピクセル)。
　　　widthは適当にいじってもOKだけど、
　　　heigthはいじると表示されないボタンが出てきたりするのでいじらない方がいいかも

• 10行目：<param name="AutoStart" value="true">

　　　AutoStartはその名の通り、「自動的に再生する」わけで、
　　　value="true"　は、その設定が有効か無効か決めるためのもの。
　　　この状態だと有効になってるわけですが、
　　　value="false"　とすると、その設定は無効になるです。
　　　true,false以外に、「0(無効)」か「1(有効)」かで指定してもOK。

• 11行目：<param name="ShowControls" value="true">

　　　ShowControlsは、各種ボタンの表示の設定のためのもの。
　　　value="true"は前述の通り。
　　　falseにすると音声の再生、停止や音量調節が出来ないので不便かも。

• 12行目：<param name='ShowStatusBar' value='true'>

　　　ShowStatusBarは、現在の状態の確認を行えるバーを
　　　表示するためのもの。　value="true"はやっぱり先述の通り。
　　　falseにしても問題ないけど、メタデータを送信する場合はtrueにしておかないと
　　　曲名などの情報が表示できないのでオススメしません。

• 13行目：autostart="1" showcontrols="1"

　　　10行目と11行目のそれと同じです。
　　　10行目と11行目の設定を有効にしている場合は、
　　　こちらも同様に有効に(値を1とする)しておかないといけないのだ。

あ、ShowControlsとShowStatusBarを無効にした場合、
プレイヤーの縦幅(heigth)の数値を変更することが出来ますよー。

というわけで、プレイヤーをページに埋め込む作業に関する解説は以上です。
ちなみにサンプルページの文章や文字色、背景などを変更したい、
なんて人向けの解説は行いませんのでそのつもりで。