ヘルプ


FLASH MP3 player の設置方法を説明します。



・ ホームページに貼り付けるタグ

・ ホームページに載せてみよう

・ ブログに貼り付けてみよう

・ 別のドメインから曲を読み込む時の注意点

・ 参考情報




ホームページに貼り付けるタグ


HTMLファイルに以下のタグを貼り付けてください。。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="270" height="180" id="mp3player" align="middle">
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="mp3player.swf" />
<param name="FlashVars" value="txt=info.txt&color=aqua" />
<embed src="mp3player.swf" FlashVars="txt=info.txt&color=aqua"
quality="high" bgcolor="#ffffff" width="270" height="180" name="mp3player" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>


緑文字の mp3player.swf と 180 は
使用するプレーヤーのファイル名と高さです。
自分の使用するプレーヤーに合わせて書き換えて下さい。

  10曲表示  4曲表示(標準)  1曲表示
ファイル名 mp3playerL.swf mp3player.swf mp3playerS.swf
高さ 300 180 100

赤文字の FlashVars と書いてある行に注目。

青文字の txt=info.txt&color=aqua の部分に設定を書きます。
設定できる変数は下の表をご確認下さい。

変数名 内容
txt 曲目情報を書き込んだテキストファイルへのファイルパス
color プレーヤーの色情報
「#00000000」形式のカラーコードで記述する。
「#赤緑青透」で色の濃さ、透明度を 0x00 ~ 0xFF の範囲で指定する。
透明度は省略可能で、省略する場合は「#000000」形式で記述する。
例:「color=#FF0000FF」

「pink」,「lime」,「aqua」等のいくつかの色はすでに用意されている。
プレーヤーの色についてはこちらのサンプルページを参照して下さい。
mp3 MP3ファイルへのファイルパス(1曲だけ再生する場合に設定)
mp3title 曲のタイトル(1曲だけ再生する場合に設定)
autoplay ページが開かれたときに曲を自動再生する。
デフォルトでは機能は OFF になっている。
自動再生する場合は「on」か「yes」か「ok」を記述する。
例:「autoplay=on」
dl 曲のダウンロードボタン(DLボタン)を表示するかどうか
デフォルトでは機能は OFF になっている。
ダウンロード機能を有効にする場合は「on」か「yes」か「ok」を記述する。
例:「dl=on」

※この曲のダウンロード機能はウェブサイトにページをアップロードしてからご確認下さい。ローカルパソコン上ではボタンを押して何の反応もありません。

txt=info.txt&color=aqua 」 には、
txt 」のファイルパスが「 info.txt 」で、
color 」の設定が「 aqua 」だと書かれています。

・変数名とその内容は「 =(イコール/半角文字) 」でつなぎます。
・変数が2つ以上あるときは、前後を「 & (アンド/半角文字)」でつなぎます。

・テキストファイルに曲目情報を99曲まで書き込めますが、
 1曲だけ再生したい場合は「 mp3 」変数を使うと良いです。
 <param name="FlashVars" value="mp3=sample.mp3&mp3title=曲のタイトル" />
 と上記のように設定できます。

・曲目情報を設定するテキストは下記のように記述してください。

info.txt の中身

<?xml version="1.0" encoding="UTF-8" ?>
<data>
  <body>
    <content>
      <path>sinsetu.mp3</path>
      <title>親切さん</title>
    </content>
    <content>
      <path>shirt_and_iron.mp3</path>
      <title>シャツとアイロン</title>
    </content>
  </body>
</data>



<path> ~ </path> にMP3ファイルへのパスを記入します。

<title> ~ </title> に曲のタイトルを記入します。

曲数を増やしたいときは、
<content>
  ~
</content>
の部分をコピーして追加していってください。


※注意
info.txt ファイルの形式は「SJIS」形式ではなく「UTF-8」形式で「名前を付けて保存」して下さい。


「UTF-8」形式でテキストファイルを保存する方法が分からない方は、
「UTF-8」形式の「info.txt」ファイルを下からダウンロードして下さい。

右クリックで「対象をファイルに保存」「名前を付けてリンク先を保存」を選ぶ




ホームページに載せてみよう


ホームページに載せる前に、動作の確認をブラウザ上でします。
最初に、どこかのフォルダに以下のファイルを用意して下さい。

・.txt ファイル
・.html ファイル
・mp3player.swf
・.mp3 ファイル



「 info.txt 」は、上の方でダウンロードできます。
MP3ファイルはあなたが用意したものを使い、info.txt の中身をそのファイル名に書き換えます。
「 mp3player.html 」には、下記をコピーして貼り付けます。

<html><body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="270" height="180" id="mp3player" align="middle">
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="mp3player.swf" />
<param name="FlashVars" value="txt=info.txt" />
<embed src="mp3player.swf" FlashVars="txt=info.txt"
quality="high" bgcolor="#ffffff" width="270" height="180" name="mp3player" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body></html>

そして「 mp3player.html 」をブラウザで開いて(ダブルクリックする)、
プレーヤーで曲を再生できたら、確認完了。
あとは、ホームページの特定のフォルダにアップロードして、動作を確認しましょう。



ブログに貼り付けてみよう


一つ前に説明した「ホームページに載せてみよう」の環境をそのまま利用します。
もう一度こちらをご覧下さい。



これらのファイルは、このホームページの

http://flashs.goraikou.com/test/
のフォルダに入っています。

info.txt」を読み込みたいときは、
http://flashs.goraikou.com/test/info.txt
のURLを開けば読めます。

そしてプレーヤーのURLはこちらです。
http://flashs.goraikou.com/test/mp3player.swf

これらの設定が調った上で、ブログに以下の記述を貼り付けます。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="270" height="180" id="mp3player" align="middle">
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="http://flashs.goraikou.com/test/mp3player.swf" />
<param name="FlashVars" value="txt=http://flashs.goraikou.com/test/info.txt" />
<embed src="http://flashs.goraikou.com/test/mp3player.swf"
FlashVars="txt=http://flashs.goraikou.com/test/info.txt"
quality="high" bgcolor="#ffffff" width="270" height="180" name="mp3player" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

赤色のURLは「mp3player.swf」へのファイルパスを記述します。
青色のURLは「info.txt(設定ファイル)」へのファイルパスを記述します。

ブログ側の設定はこれで終了です。
そして、ホームページ側で用意するものがもう一つあります。
こちらをご覧下さい。



上記の赤線で示されたファイル「 crossdomain.xml 」を、
ホームページのトップページの階層に置いてください。
このホームページのトップページの階層に置いたときは、以下のURLになります。
http://flashs.goraikou.com/crossdomain.xml

ファイルは下からダウンロードしてください。

右クリックで「対象をファイルに保存」「名前を付けてリンク先を保存」を選ぶ

crossdomain.xml ファイルは以下のように記述されています。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>


これでブログに貼り付けたプレーヤーで曲が再生されるようになっているはずです。

※ ブログによっては FLASH を貼り付けられない場合があります。
  各運営会社の「Q&A」や「ヘルプ」をご確認下さい。




別のドメインから曲を読み込む時の注意点


FLASH アプリケーションで、他のドメイン(ホームページ)から曲やテキストファイルを読み込むとき、 その対象の他のドメイン(ホームページ)のトップページ階層に、「crossdomain.xml」ファイルが置いてある必要があります。

ここにダウンロードを許可する情報が書かれていると、FLASH は対象のドメイン(ホームページ)からファイルを読み込むことが可能になります。 このファイルに許可する情報が書いてないと曲の読み込みに失敗してアプリケーションが動きません。



参考情報


・ MP3の形式の一部で FLASH に非対応のものがあるそうです。その一覧です。

○ CBR(固定ビットレート)
× ABR(平均ビットレート)
× VBR(可変ビットレート)
× FFS(フリーフォーマットストリーム)


・ 「info.txt」のテキスト名は変更しても構いません。


・ 「info.txt」の<path>~<path> 内の、MP3ファイルへのパス記述は、
  「info.txt」ファイルを基準とした相対パスか、あるいは、
  「http://」から始まる絶対パスで記述してください。


・ 設置サンプルです。




使用タグ

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="270" height="180" id="mp3player" align="middle">
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="mp3player.swf" />
<param name="FlashVars" value="txt=help/info.txt&color=lime" />
<embed src="mp3player.swf" FlashVars="txt=help/info.txt&color=lime"
quality="high" bgcolor="#ffffff" width="270" height="180" name="mp3player" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>


info.txt の中身

<?xml version="1.0" encoding="UTF-8" ?>
<data>
  <body>
    <content>
      <path>mp3/sinsetu.mp3</path>
      <title>親切さん</title>
    </content>
    <content>
      <path>mp3/shirt_and_iron.mp3</path>
      <title>シャツとアイロン</title>
    </content>
  </body>
</data>



・ ショートタイプ




使用タグ

ショートタイプのときは記述の変更箇所があります。
・height="180" → height="100"
・src="mp3player.swf" → src="mp3playerS.swf"

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="270" height="100" id="mp3playerS" align="middle">
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="mp3playerS.swf" />
<param name="FlashVars" value="txt=help/info3.txt&color=#FFDD33FF" />
<embed src="mp3playerS.swf" FlashVars="txt=help/info3.txt&color=#FFDD33FF"
quality="high" bgcolor="#ffffff" width="270" height="100" name="mp3playerS" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

info.txt の中身

<?xml version="1.0" encoding="UTF-8" ?>
<data>
  <body>
    <content>
      <path>mp3/sinsetu.mp3</path>
      <title>親切さん</title>
    </content>
  </body>
</data>



・ ロングタイプ




使用タグ

ロングタイプのときは記述の変更箇所があります。
・height="180" → height="300"
・src="mp3player.swf" → src="mp3playerL.swf"

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="270" height="300" id="mp3playerL" align="middle">
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="mp3playerL.swf" />
<param name="FlashVars" value="txt=help/info2.txt&color=#00FFFF80" />
<embed src="mp3playerL.swf" FlashVars="txt=help/info2.txt&color=#00FFFF80"
quality="high" bgcolor="#ffffff" width="270" height="300" name="mp3playerL" align="middle" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>