オリジナル曲（巡音ルカさん歌）のダウンロード販売を始めてみた（1）～HTML 5のaudio要素で試聴を実装する～

年末年始、突発性難聴で通院していたとき、紙のノートを持って行って、待ち時間に、「脳」にまつわる物語を落とし込んだ歌を２つ書いた。なんとか耳が治ってきたので、入力した。

それらの歌を、巡音ルカさんに歌ってもらったので、ピアプロリンクに登録したうえで、販売してみることにした。

販売には、クリプトン・フューチャー・メディアの独立ミュージシャン向け配信サービス「RouteR」の一環である「CHIMERA」を利用した。
もともと6年ほど前に、コンテンツ配信をしていくつもりで屋号を変更しておいたこともあって、個人事業所をレーベルとして登録した。

「CHIMERA」は、ライブ音源などを自サイトですぐに販売できるシステムである。シンプルなカート機能が付いている。
ストア販売にあたっては無料の試聴再生プレイヤーの作成サービスがあるが、私は、本業（ヴィジュアル・ワーク）以外の作業については、ハムスター並みに臆病なので、ストア販売は来月を予定して、まずは「CHIMERA」を使い、自サイトに販売ページを開設してみた。

「CHIMERA」のカートの上には、HTML5のaudio要素を使って、試聴機能を追加してみた。
もっとも、1320幅で作ってしまったうえ、IE9でしか確認していないのだが（受託制作業務ではないので、今回は他のブラウザまでは考えないことに）。

HTMLは、こんな感じ。

<audio id="audio1" style="width:520px;" height="30%" controls="true" />
<button id="track1" onClick="play(this)" value="Track1のmp3ファイル名を絶対パスで指定" style="インラインCSS">PLAY</button>
<button  id="track2" onClick="play(this)" value="Track2のmp3ファイル名を絶対パスで指定" style="インラインCSS">PLAY</button>

JavaScriptは、このように書いた。

<script type="text/javascript">
     function play(track)
     {
var myAudio = document.getElementById('audio1');
myAudio.volume = 0.7;
var myMpegURI = track.getAttribute("value");
myAudio.src = myMpegURI;
myAudio.play();
     }
</script>

これだけで済むのだから何とも便利である。ただ、アプリケーションとして作り込む場合は、私はHTMLよりも細かくカスタマイズのできるSilverlghtを選びたい。

そうして作ったダウンロードページは、こちら。

2曲入りアルバム「Change The Brain」ダウンロード販売ページ

歌はといえば、キャラクター性は一切なく、みっくみくになるようなものでは、ない。

トシだからというのではなく、私は学生時代から内省的な歌しか作ることができない。
おそらくミクが見せてくれる光あふれる世界とは真逆の方向を向いてしまっている。
まぁでも、そういう歌がひとつふたつあっても珍しくていいかも......と、思っておくことにする。

Track1 : Don't Cry, Mama （5:20）　
テーマは、虐待の連鎖の停止。
祖母―母―孫娘という、3世代の人生。祖母から虐待された過去に苦しむ母を守り、孫娘が人生を切り開こうとする、という内容。

Track2 : Change The Brain （2:16）　
ニューロエシックスなホラー。能力に凹凸があって大人たちから理解されない二人の子供。長じて、それぞれ「脳機能の一部を物理的に交換するか、そのままの自分で生きていくか」という問いに直面する。そして、交換はイヤだと叫ぶ。

どちらも、リア充の人には無関係な内容だろうけど、もし周りに、親を理解する方法や、自分の能力の伸ばし方に、悩んだり苦しんでいる人（とくに、学生）がいたなら、これらの歌は何かの役に立てるのではないかと思っている。