icasterの音楽配信ブログパーツの素材(FLASHファイルや設定ファイル)と設定マニュアルを公開します。ブログパーツの素材をダウンロードして設定を行い、Webサイトやブログにアップロードすることで、試聴プレーヤーとしても、「貼り付け用ソース」を公開するブログパーツとしてもお使いいただけます。
※2009年10月10日以降、icaster.jpは別サーバに転送されます。
mp3ファイルを読み込んで、1曲だけをシンプルに再生するブログパーツです。
キャラクターアイコンからのリンク先も指定もできます。
・FLASHファイル(soundplayer.swf)ほか設定のサンプルなど含む。
※2009年8月17日修正情報公開
・swfファイル(FLASHファイル)
→ダウンロードしたswfファイルをそのままアップロードします。
・mp3ファイル(楽曲ファイル)
→流したい楽曲のmp3ファイルを用意してアップロードします。
(他のサイトに貼り付けるブログパーツとして公開できるサービスの例)
・シーサー・ブログ http://blog.seesaa.jp/
・みぶろぐ http://meblog.jp/
・忍者ホームページ http://www.ninja.co.jp/hp/(2009/8/17修正)
・Yahoo!ジオシティーズ http://geocities.yahoo.co.jp/(2009/8/17修正)
・FC2 ホームページ http://web.fc2.com/(2009/8/17修正)
※2009/8/17修正内容(ブラウザがIEの場合、忍者ホームページ、Yahoo!ジオシティーズ、FC2 ホームページなどのサービスでは、ブログパーツとして外部サイトに貼り付けたswfファイルが読み込めません)
(自分のWebサイト内の試聴用プレーヤーとして使えるサービスの例)
・忍者ホームページ http://www.ninja.co.jp/hp/
・Yahoo!ジオシティーズ http://geocities.yahoo.co.jp/
・FC2 ホームページ http://web.fc2.com/
・gooブログや楽天ブログをのぞく多くの著名ブログサービスが使えます。
・エンコードは128kbps(44.1kHz)を推奨。
「BlogJockeyプレーヤー」タイプ:ダウンロード-125KB
(内容)
| sample.html | 「貼り付け用ソース」を貼り付けたhtmlページのサンプルです。 |
| samba_a.mp3 | 楽曲のmp3ファイルのサンプルです。 |
| soundplayer.swf | ブログパーツの本体となるswfファイルです。 |
| soundplayer.js | ブログパーツとして配布する場合に使うjavascripitファイルのサンプルです。 |
(objectタグembedタグを使用するタイプ)
→MySpace、Vox、スペース(ブログ)、イザ!など。
(javascriptを使用するタイプ)
→アメブロ、FC2ブログ、livedoorブログほか多数。
以下のサンプル記述のうち、着色部分をそれぞれ、ご利用の環境にあわせて変更します。
貼り付け用ソースのサンプル(objectタグembedタグを使用するタイプ)
------------------------------------------------------------
<object width="120" height="31" id="soundplayer" align="middle">
<param name="movie" value="http://testotto.up.seesaa.net/play/soundplayer.swf?data=http://testotto.up.seesaa.net/play/samba_a.mp3&link=http://testotto.seesaa.net/" />
<embed src="http://testotto.up.seesaa.net/play/soundplayer.swf?data=http://testotto.up.seesaa.net/play/samba_a.mp3&link=http://testotto.seesaa.net/" width="120" height="31" name="soundplayer" align="middle" type="application/x-shockwave-flash" />
</object>
------------------------------------------------------------
1.青色部分(2カ所)をアップロードしたswfファイル(soundplayer.swf)のURLに変更。
2.赤色部分(2カ所)をアップロードしたmp3ファイルのURLに変更。
3.黄色部分(2カ所)をキャラクターアイコンからリンクさせたいURLに変更。
上記「貼り付け用ソース」をWebサイトやブログに貼り付けることで、ブログパーツを使用できます。
(対応ブログ)MySpace、Vox、スペース(ブログ)、イザ!など。
「貼り付け用ソース」を記述する前に、javascriptファイルを準備します。ダウンロードしたブログパーツの素材に含まれるsoundplayer.jsをテキストエディタ(Windowsのメモ帳やMacのテキストエディットなど)で開き、着色部分をそれぞれ、ご利用の環境にあわせて変更して保存します。
javascriptファイルのサンプル(soundplayer.js)
------------------------------------------------------------
document.write('<object width="120" height="31" id="soundplayer" align="middle">');
document.write('<param name="movie" value="http://testotto.up.seesaa.net/play/soundplayer.swf?data=http://testotto.up.seesaa.net/play/samba_a.mp3&link=http://testotto.seesaa.net/" />');
document.write('<embed src="http://testotto.up.seesaa.net/play/soundplayer.swf?data=http://testotto.up.seesaa.net/play/samba_a.mp3&link=http://testotto.seesaa.net/" width="120" height="31" name="soundplayer" align="middle" type="application/x-shockwave-flash" />');
document.write('</object>');
------------------------------------------------------------
1.青色部分(2カ所)をアップロードしたswfファイル(soundplayer.swf)のURLに変更。
2.赤色部分(2カ所)をアップロードしたmp3ファイルのURLに変更。
3.黄色部分(2カ所)を、キャラクターアイコンからリンクさせたいURLに変更。
変更して保存したsoundplayer.jsファイルは、自分のWebサイトやブログにアップロードし、そのURLをひかえます。
URLの例:http://testotto.up.seesaa.net/play/soundplayer.js
次に「貼り付け用ソース」を作成します。以下のサンプル記述の緑色部分を、アップロードしたsoundplayer.jsファイルのURLにおきかえます。
貼り付け用ソースのサンプル(javascriptを使用するタイプ)
------------------------------------------------------------
<script type="text/javascript" src="http://testotto.up.seesaa.net/play/soundplayer.js"></script>
------------------------------------------------------------
この「貼り付け用ソース」をWebサイトやブログに貼り付けることで、ブログパーツを使用できます。
【対応ブログ】アメブロ、FC2ブログ、livedoorブログほか多数。
着色部分をそれぞれご利用の環境にあわせて変更し、ページに貼り付けることで公開できます。
ブログパーツ公開用のhtmlサンプル記述
------------------------------------------------------------
1.紫色部分(1カ所)をobjectタグembedタグを使用するタイプの「貼り付け用ソース」に変更。
2.オレンジ色部分(1カ所)をjavascriptを使用するタイプの「貼り付け用ソース」に変更。
プレイリストに登録されたmp3ファイルを読み込んで、次々とノンストップでシャッフル再生するブログパーツです。プレイリストの切り替えもできます。
楽曲名、アーティスト名、jpeg画像によるアートワークを表示でき、アートワークからのリンク先を個別に設定できます。
ブログパーツの下部の文字(以下の例の「全体のplaylistのページヘリンク」の部分)とキャラクターアイコンからのリンクは、プレイリストごとに切り替えられます。
・FLASHファイル(radioplayer.swf)ほか、サンプルとしてプレイリストxmlファイル(playlist0.xml、playlist1.xml〜)、プレイリストを管理するxmlファイル(icasterdata.xml)などの設定ファイルなど含む。
・swfファイル(FLASHファイル)
→ダウンロードしたswfファイルをそのままアップロードします。
・mp3ファイル(楽曲ファイル)
→流したい楽曲のmp3ファイルを用意してアップロードします。
・xmlファイル(プレイリスト関連の設定ファイル)
→プレイリスト関連の設定をするxmlファイルを作成してアップロードします。
(他のサイトに貼り付けるブログパーツとして公開できるサービスの例)
・シーサー・ブログ http://blog.seesaa.jp/
・みぶろぐ http://meblog.jp/
(自分のWebサイト内の試聴用プレーヤーとして使えるサービスの例)
・忍者ホームページ http://www.ninja.co.jp/hp/
・Yahoo!ジオシティーズ http://geocities.yahoo.co.jp/
・FC2 ホームページ http://web.fc2.com/
・gooブログや楽天ブログをのぞく多くの著名ブログサービスが使えます。
・エンコードは128kbps(44.1kHz)を推奨。
・60×60ピクセルのJPEG形式。
「icasterシャッフル・ラジオ」タイプ:ダウンロード-649KB
(内容)
| sample.html | 「貼り付け用ソース」を貼り付けたhtmlページのサンプルです。 |
| fanfare_a.jpg fanfare_b.jpg fanfare_c.jpg samba_a.jpg samba_b.jpg samba_c.jpg se_a.jpg se_b.jpg se_c.jpg |
アートワーク(ジャケット画像的なもの)のサンプルです。 |
| radioplayer_off.js radioplayer_on.js |
ブログパーツとして配布する場合に使うjavascripitファイルのサンプルです。 |
| fanfare_a.mp3 fanfare_b.mp3 fanfare_c.mp3 samba_a.mp3 samba_b.mp3 samba_c.mp3 se_a.mp3 se_b.mp3 se_c.mp3 |
楽曲のmp3ファイルのサンプルです。 |
| radioplayer.swf | ブログパーツの本体となるswfファイルです。 |
| icasterdata.xml | プレイリストを管理するxmlファイルのサンプルです。 |
| playlist0.xml playlist1.xml playlist2.xml playlist3.xml |
プレイリストxmlファイルのサンプルです。 |
ダウンロードしたブログパーツの素材に含まれるplaylist0.xmlをテキストエディタ(Windowsのメモ帳やMacのテキストエディットなど)で開き、以下の例を参考に変更して保存します。
playlist0.xmlに続けて、playlist1.xml、playlist2.xml等など作成することで、複数のプレイリストを切り替えて再生できるようになります。
プレイリストxmlファイル(playlist0.xml)
------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<music_list title="icaster">
<music id="1">
<title>サンバA</title>
<artist>サンプルA</artist>
<data>http://radio55.up.seesaa.net/radio/samba_a.mp3</data>
<art>http://radio55.up.seesaa.net/radio/samba_a.jpg</art>
<link>http://radio55.seesaa.net/</link>
</music>
<music id="2">
<title>サンバB</title>
<artist>サンプルB</artist>
<data>http://radio55.up.seesaa.net/radio/samba_b.mp3</data>
<art>http://radio55.up.seesaa.net/radio/samba_b.jpg</art>
<link>http://radio55.seesaa.net/</link>
</music>
<music id="3">
<title>サンバC</title>
<artist>サンプルC</artist>
<data>http://radio55.up.seesaa.net/radio/samba_c.mp3</data>
<art>http://radio55.up.seesaa.net/radio/samba_c.jpg</art>
<link>http://radio55.seesaa.net/</link>
</music>
</music_list>
------------------------------------------------------------
灰色部分は固定です。変更しないでください。
<music id="数字">から</music>までが1曲分の情報です。
1.茶色部分は楽曲の管理番号です。
他の楽曲と相互に重ならない半角数字を入れてください。
2.<title>曲名</title>
3.<artist>アーティスト名</artist>
4.<data>mp3ファイルのURL</data>
5.<art>アートワークのURL</art>
6.<link>アートワークからのリンク先URL</link>
追加できる曲数は1000程度です。
例えばplaylist0.xmlで、全ラインナップを対象としたプレイリストを作り、playlist1.xml、playlist2.xml、playlist3.xmlなど、CDのリリース単位などで絞り込んだプレイリストを複数作って、メニューから絞り込んで聴いてもらう使い方などがおすすめです。
ダウンロードしたブログパーツの素材に含まれるicasterdata.xmlをテキストエディタ(Windowsのメモ帳やMacのテキストエディットなど)で開き、以下の例を参考に変更して保存します。
icasterdata.xmlのファイル名は変更しないでください。
プレイリストを管理するxmlファイル(icasterdata.xml)
------------------------------------------------------------
<channel_list>
<channnel id="0">
<title>全体playlist</title>
<message> 全体playlistのページへリンク</message>
<message_link id="1">http://radio55.seesaa.net/</message_link>
<music_list>http://zoo.chu.jp/radio/playlist0.xml</music_list>
</channnel>
<channnel id="1">
<title>サンバplaylist</title>
<message> sambaplaylistのページへリンク</message>
<message_link id="1">http://radio55.seesaa.net/</message_link>
<music_list>http://radio55.up.seesaa.net/radio/playlist1.xml</music_list>
</channnel>
<channnel id="2">
<title>ファンファーレplaylist</title>
<message> fanfareplaylistのページへリンク</message>
<message_link id="1">http://radio55.seesaa.net/</message_link>
<music_list>http://radio55.up.seesaa.net/radio/playlist2.xml</music_list>
</channnel>
<channnel id="3">
<title>サウンドエフェクトplaylist</title>
<message> サウンドエフェクトのページへリンク</message>
<message_link id="1">http://radio55.seesaa.net/</message_link>
<music_list>http://radio55.up.seesaa.net/radio/playlist3.xml</music_list>
</channnel>
</channel_list>
------------------------------------------------------------
灰色部分は固定です。変更しないでください。
<channnel id="数字">から</channnel>までが1つのプレイリストの情報です。
1.茶色部分はプレイリスト番号です。
0から連番の半角数字を入れてください。
2.<title>プレイリスト名</title>
3.<message>リンク用のメッセージ</message>
4.<message_link id="1">リンク先URL</message_link>
5.<music_list>プレイリストxmlファイルのURL</music_list>
追加できるプレイリスト数は10程度です。
(objectタグembedタグを使用するタイプ)
→MySpace、Vox、スペース(ブログ)、イザ!など。
(javascriptを使用するタイプ)
→アメブロ、FC2ブログ、livedoorブログほか多数。
以下のサンプル記述のうち、着色部分をそれぞれ、ご利用の環境にあわせて変更します。
------------------------------------------------------------
<object width="150" height="175" id="radioplayer" align="middle">
<param name="movie" value="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=off&link=http://radio55.seesaa.net/" />
<embed src="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=off&link=http://radio55.seesaa.net/" quality="high" width="150" height="175" name="radioplayer" align="middle" type="application/x-shockwave-flash" />
</object>
------------------------------------------------------------
1.青色部分(2カ所)をアップロードしたswfファイル(radioplayer.swf)のURLに変更。
2.赤色部分(2カ所)をアップロードしたプレイリスト管理xmlファイル(icasterdata.xml)のURLに変更。
3.黄色部分(2カ所)をブログパーツの下部の文字とキャラクターアイコンからリンクさせたいURLに変更。
なお、肌色部分(2カ所)のauto=offを、auto=onにすると、自動再生がONの状態のブログパーツとなります。
上記「貼り付け用ソース」をWebサイトやブログに貼り付けることで、ブログパーツを使用できます。
【対応ブログ】MySpace、Vox、スペース(ブログ)、イザ!など。
「貼り付け用ソース」を記述する前に、javascriptファイルを準備します。ダウンロードしたブログパーツの素材に含まれるradioplayer_off.jsをテキストエディタ(Windowsのメモ帳やMacのテキストエディットなど)で開き、着色部分をそれぞれ、ご利用の環境にあわせて変更して保存します。
javascriptファイル(radioplayer_off.js)
------------------------------------------------------------
document.write('<object width="150" height="175" id="radioplayer" align="middle">');
document.write('<param name="movie" value="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=off&link=http://radio55.seesaa.net/" />');
document.write('<embed src="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=off&link=http://radio55.seesaa.net/" quality="high" width="150" height="175" name="radioplayer" align="middle" type="application/x-shockwave-flash" />');
document.write('</object>');
------------------------------------------------------------
1.青色部分(2カ所)をアップロードしたswfファイル(radioplayer.swf)のURLに変更。
2.赤色部分(2カ所)をアップロードしたプレイリスト管理xmlファイル(icasterdata.xml)のURLに変更。
3.黄色部分(2カ所)をブログパーツの下部の文字とキャラクターアイコンからリンクさせたいURLに変更。
なお、肌色部分(2カ所)のauto=offを、auto=onにすると、自動再生がONの状態のブログパーツとなります(サンプルのradioplayer_on.jsと同じ内容)。
変更して保存したradioplayer_off.jsファイルは、自分のWebサイトやブログにアップロードし、そのURLをひかえます。
URLの例:http://radio55.up.seesaa.net/radio/radioplayer_off.js
次に「貼り付け用ソース」を作成します。以下のサンプル記述の緑色部分を、アップロードしたradioplayer_off.jsファイルのURLにおきかえます。
------------------------------------------------------------
<script type="text/javascript" src="http://radio55.up.seesaa.net/radio/radioplayer_off.js"></script>
------------------------------------------------------------
この「貼り付け用ソース」をWebサイトやブログに貼り付けることで、ブログパーツを使用できます。
【対応ブログ】アメブロ、FC2ブログ、livedoorブログほか多数。
着色部分をそれぞれご利用の環境にあわせて変更し、ページに貼り付けることで公開できます。
------------------------------------------------------------
貼り付け用ソース(objectタグembedタグを使用するタイプ)<自動再生OFF><br />
<form name="urlForm_off_object" id="urlForm_on_object"><input name="embed_code" type="text" value='<object width="150" height="175" id="radioplayer" align="middle"><param name="movie" value="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=off&link=http://radio55.seesaa.net/" /><embed src="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=off&link=http://radio55.seesaa.net/" quality="high" width="150" height="175" name="radioplayer" align="middle" type="application/x-shockwave-flash" /></object>' onClick="javascript:document.urlForm_off_object.embed_code.focus();document.urlForm_off_object.embed_code.select();" readonly="true" style="width:260px;border:2px inset;"></form>
<br />
<br />
貼り付け用ソース(objectタグembedタグを使用するタイプ)<自動再生ON><br />
<form name="urlForm_on_object" id="urlForm_on_object"><input name="embed_code" type="text" value='<object width="150" height="175" id="radioplayer" align="middle"><param name="movie" value="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=on&link=http://radio55.seesaa.net/" /><embed src="http://radio55.up.seesaa.net/radio/radioplayer.swf?music_list=http://radio55.up.seesaa.net/radio/icasterdata.xml&auto=on&link=http://radio55.seesaa.net/" quality="high" width="150" height="175" name="radioplayer" align="middle" type="application/x-shockwave-flash" /></object>' onClick="javascript:document.urlForm_on_object.embed_code.focus();document.urlForm_on_object.embed_code.select();" readonly="true" style="width:260px;border:2px inset;"></form>
<br />
<br />
貼り付け用ソース(javascriptを使用するタイプ)<自動再生OFF><br />
<form name="urlForm_off_js" id="urlForm_off_object"><input name="embed_code" type="text" value='<script type="text/javascript" src="http://radio55.up.seesaa.net/radio/radioplayer_off.js"></script>' onClick="javascript:document.urlForm_off_js.embed_code.focus();document.urlForm_off_js.embed_code.select();" readonly="true" style="width:260px;border:2px inset;"></form>
<br />
<br />
貼り付け用ソース(javascriptを使用するタイプ)<自動再生ON><br />
<form name="urlForm_on_js" id="urlForm_off_object"><input name="embed_code" type="text" value='<script type="text/javascript" src="http://radio55.up.seesaa.net/radio/radioplayer_on.js"></script>' onClick="javascript:document.urlForm_on_js.embed_code.focus();document.urlForm_on_js.embed_code.select();" readonly="true" style="width:260px;border:2px inset;"></form>
<br />
<br />
------------------------------------------------------------
1.紫色部分(各1カ所)を<自動再生OFF><自動再生ON>それぞれのobjectタグembedタグを使用するタイプの「貼り付け用ソース」に変更。
2.オレンジ色部分(各1カ所)を<自動再生OFF><自動再生ON>それぞれのjavascriptを使用するタイプの「貼り付け用ソース」に変更。