音楽方丈記

ユニクロの発熱保温ウェア「ヒートテック」のプロモーションサイト UNIQLO TUNES / HEATTECH を紹介。



ネット上にある好きな MP3 ファイルを指定してプロモーションブログパーツが作れます。
BGM を指定しない場合は標準のものが使われます。

標準 BGM で作成する場合

標準の BGM を使用する場合は「NORMAL」、指定する場合は「YOUR SONG HERE」を選択。
BGM の自動再生をしたくないときは OFF を選択。


サイズはLARGE / SMALL の2種類から選択。


最後に表示される埋め込みコードをブログなどに貼り付ければ完成です。

BGM を指定して作成する場合

BGM を指定する場合は規約許諾画面が表示されるので、「OK」を選択。


http 形式でアクセスできる URL で 再生したい MP3 ファイルを指定。
(http でもオンラインストレージのような直接ファイルにアクセスできない場所は指定できません)
テロップに流れる曲のタイトルやアーティスト名の変更もできます。
残りの手順は標準と同じです。

作成例

ブログに貼り付けるとこんな感じになります。(サイズを500x310に変更)
クリックでブログパーツが動くようにしてあります。


使用する曲にもよりますが、BGM の自動再生はなるべく OFF のほうがよいかも・・・
(ただし OFF の状態でパーツ再生中に ON にすると曲も途中から再生されます)

今回に限らずユニクロのプロモーションサイトってセンスがいいものが多いですよね。

[関連サイト]
　ユニクロ
　UNIQLO TUNES / HEATTECH

---

おかげさまで総アクセス数500万 PV を突破しました。
いつも見に来てくれる方(ググって偶然来てくれる方も)、ありがとうございます。
ここまでくるのに約3年7ヶ月。これからも地味にがんばります。

ブラウザ上で動作する TENORI-ON 風の16ステップループシーケンサー nudge を紹介。

　 Synthtopia の記事によると、hobnox Audiotool の開発チームが作ったものなのだそうです。そういえば、いつからだったか hobnox にも似たようなのが追加されてましたね。
(hobnox Audiotool の詳細は過去記事を参照)



　8種類のサウンドが割り当てられたマトリックスをクリック(またはドラッグ)してフレーズを作っていきます。
　右下の►ボタンで再生/停止、その左隣の◎ツマミでテンポの変更、右端に縦に並んだの8つの■ボタンでトラックの切り替え、左下の◎ツマミでボリュームとパンの調整ができます。
　
↓こんな感じでブログにも貼り付けることができます。
(画像をクリックしてください。表示されるまで若干時間がかかります)


こういう類のツールって使い方は単純だけど奥が深いですよね。
つい遊びふけってしまいます。

[関連サイト]
　inudge.net - Nudge
　Hobnox - Audiotool
　YAMAHA TENORI-ON
　Synthtopia - Steal This Synthesizer!

前にここでも紹介したカセットテープ型のプレイヤーが特徴だったミックステープサイト Mixwit は、去年末頃に(おそらくはレコード会社の抗議によって)閉鎖に追い込まれ現在は利用できなくなっています。

　その Mixwit の作者がサイトで使っていたカセットテープ型プレイヤーのソースコードをオープンソースとして今月初めから mixwidget.org で公開しています。



　ソースコード (ActionScript3) とあわせてダウンロードできるビルド済みのサンプルを使って、指定の MP3 を再生する方法を簡単に説明します。(詳しい使い方は how to use を参照)

プレイヤー本体のダウンロード

　まずトップページの「download」から、mixwidget-demo.zip をダウンロードして展開しておきます。プレイヤーを動かすのに最低限必要なファイルは mixwidget フォルダにある以下の3つと再生する MP3 ファイルです。

• mixwidget.swf　(プレイヤー本体)
• config.xml (設定ファイル)
• playlist.xspf (プレイリスト)

　スキン(カセットテープの画像)を使いたい場合は skin.jpg、ラベル画像を使いたい場合は image.jpg が必要になります。(画像サイズは zip のサンプル参照)

プレイヤースキン

　スキンはサンプル以外にも37種類の画像が入った zip ファイル が別に用意されています。他にも、以前ここでも紹介したことのある tapedeck.org でダウンロードできますが、中央の窓枠のサイズが小さめのもの選ばないと表示がずれてしまうので注意してください。

プレイヤー設定ファイルとプレイリストファイル

　プレイヤー設定ファイル (config.xml) とプレイリストファイルは (playlist.xspf) はテキスト形式なのでテキストエディタ (Windows のメモ帳や OS X のテキストエディットでも可)で編集します。

プレイヤー設定ファイル (config.xml) の項目説明

config.xml の内容	項目の説明
<title>ここにタイトル</title>	タイトル (再生前の初期表示)
<creator>ここに作者名</creator>	作者名 (再生前の初期表示)
<image rotation="0" x="0" scale="25" y="0" mask="body"></image>	ラベルイメージ(image.jpg)を 指定しない場合は削除
<skin imageEnabled="true">	スキン(skin.jpg)を指定しないときは false
<shadow>0</shadow>	影の濃さ (0～100)
<gloss>30</gloss>	光沢の強さ (0～100)
<outlines>20</outlines>	縁の濃さ (0～100)
<frameColor>CCCCCC</frameColor>	フレームの色 (RGB)
<bodyColor>66CCFF</bodyColor>	ラベル部分の色 (RGB)
<gearboxColor>CCCCCC</gearboxColor>	フレームの真ん中の色 (RGB)
<gearColor>;598B9F</gearColor>	ギアの色 (RGB)
<threaderColor>CCCCCC</threaderColor>	フレームの下部分の色 (RGB)
<text size="18" color="FFFFFF" bgAlpha="0" bgColor="FFFFFF" align="LEFT"></text>	テキスト表示設定 　size: 文字サイズ 　color: 文字色 (RGB) 　bgAlpha: 背景の透明度 (0～100) 　bgcolor: 背景色 (RGB) 　align: 配置 (LEFT/CENTER/RIGHT)
<trackText x="26" y="21" width="260"></trackText>	タイトル/曲名の表示位置
<artistText x="28" y="38" width="260"></artistText>	作者名/アーティスト名の表示位置

　スキンを指定した場合は frameColor、 bodyColor、 gearboxColor、 threaderColor は色指定しても隠れて見えなくなります。

プレイリストファイル (playlist.xspf) の項目説明

プレイリストの書式は XSPF に準拠します。

playlist.xspf の内容	項目の説明
<title>タイトル</title>	プレイリストタイトル (表示されない)
<creator>作者名</creator>	プレイリスト作者名 (表示されない)
<track>	トラック
<location>http://～/sample.mp3</location>	MP3 ファイルの URL
<title>ここに曲名</title>	曲名
<creator>ここにアーティスト名</creator>	アーティスト名
<album>ここにアルバム名</album>	アルバム名
<duration></duration>	曲の長さ(msec)
</track>	複数曲の場合は <track> ～ </track> を同様に追加

埋め込みタグの貼り付け

　必要なファイルと MP3 を Web サーバにアップロードしたら、sample_embed.html を参考に embed タグをページに貼り付ければ完成です。
　ブログサーバに MP3 や SWF ファイルをアップロードできない場合は、別の Web サーバに置き場所を用意する必要があります。(直接アクセスできないオンラインストレージなどは不可)

↓例 (mixwidget.swf の URL は各自のものに変更してください)

↓貼り付けるとこんな感じになります。
サイズが大きめなので使いどころが限られますが、使い方次第ではインパクトのある目立つ宣伝ツールになるかも。

[関連サイト]
　mixwidget.org
　tapedeck.org
　XSPF: XML Shareable Playlist Format

---

恒例のコンパクトな埋め込みフラッシュ MP3 プレイヤー紹介記事の第8弾です。
今回はかわいいアイコンと一言メッセージが表示できる Musicons を紹介。



　簡単設定のウィザード形式になっているので、必要項目を設定するだけですぐに埋め込みコードが取得できます。入力できるメッセージは半角英数字12文字までで、全角文字は表示できません。

　再生する mp3 ファイル(最大12MB20MBまで)は Musicons のサーバにアップロードするので、ユーザが置き場所を用意する必要はありません。

↓ためしに作ってみたのがこれです

[追記] 2008/08/21
　バージョンアップされて Ver 1.1 になっていました。ファイルサイズの上限が12MBから20MBに増えています。Ver 1.0 のときに作って貼り付けたコードは動かなくなっているので、再生曲のアップロードも含めてコードを取得しなおす必要があります。

[追記] 2009/03/30
　いつから変わったのか分かりませんが、MP3 ファイルを直接アップロードするのではなく、別の Web サーバに MP3 ファイルをアップロードして、URL を指定する形式に変わっていました。

[関連サイト]
　Musicons.com

てっきりできないもんだと思ってたら意外にもあっさり再生できました。

再生サンプル

dewplayer で BassDrive の SHOUTcast ストリーミングを再生

貼り付けコードの例

　再生ファイルのパラメータのところにストリーミングしたい URL を指定して、末尾のポート指定に続けて /;stream.nsv を追加してやれば OK です。
　Nullsoft Streaming Video (NSV) 形式として認識させてやる方法らしいのですが、詳しいことは分かりません。

↓例えば上の dewplayer (mini) ではこんな感じになります。

　ポート番号とセミコロン ";" の間にあるスラッシュ "/" は必ず入れてください。これを省略すると反応しません。

　上の例では dewplayer を使っていますが、他の埋め込み mp3 プレイヤーも使っている API は多分同じはずなので再生できると思います。

[追記] 2008/11/03
「～プレイヤーのURL～」の部分は各自の dewplayer を置いた URL を指定してください。
あと、記事の見た目に合わせて自動的に改行(<br />)が挿入されるブログは、コードの改行をなくして1行にまとめてから貼り付けてください。

[追記] 2010/12/02
コメント頂いた情報によると、SHOUTcast DNAS サーバーのバージョンが1.9.2より古いと NSV 形式に対応していないとのことで、その場合はプレイヤー側で NSV を指定しても再生できないので注意。

[関連サイト]
　Alsacréations. Dewplayer lecteur mp3 en Flash
　JEROENWIJERING.COM - MP3 STREAM SERVED BY SHOUTCAST
　BassDrive