ひさびさの投稿になります、haraです。

さていつもの時計ネタですが、今回も引き続きSiONを使って、テキストでメロディの歌詞を表示する、という演出を試みています。

SiONは、音を鳴らした時に取得できるイベント、SiONTrackEventがあるため、音が鳴ったと同時に表示しているオブジェクトを動かすことがとても簡単にできます。

今回考えてみたのは、メロディを鳴らすと同時に歌詞を表示するための簡単な方法です。

ポイントとしては、１音鳴るごとに歌詞を１文字ずつ表示、という方法だと読む側にとっては不便になることです。この場合は、ある程度の節で分割して表示するのがいいでしょう。

となると、素直にSiONTrackEventを取得して表示、というわけにはいかないので少し工夫します。

 

SiONを使ってメロディを鳴らしたい時は、MMLという簡易言語でメロディを入力します。

このMMLを、対応する歌詞とセットにしてXMLに保存します。

 

<items>
<item lyrics="ラララララ" code="ccggaag2" />
<item lyrics="ラララララ" code="ffeeddc2" />
</items>

 

これをflashで取り込み、MMLの部分は連結し、SiONで再生します。

その一方で、codeタグの中のMMLの文字数を保存しておきます。

 

private function GetcountCode(xml:XML):void {
  var s:int = 0;
  LyricCounter.push(s);
  for(var i:int=0; i<xml.children().length()-1; i++) {
    s += String(xml.item[i].@code).length-1;
    LyricCounter.push(s);
  }
}

(LyricCounterという配列に保存）

そして、再生中にSiONTrackEventの回数をカウントして、配列に保存されているMMLの文字数に引っかかった時に歌詞を表示する命令を出します。

 

private function NoteOnEvent(e:SiONTrackEvent):void {
 if(counter==LyricCounter[lCounter]) {
  var ono:onomatop = new onomatop();
  this.addChild(ono);

  ono.makeText(String(LylicXML.item[lCounter].@lyrics));
  ono.x = 100 + 100 * Math.random();
  ono.y = 100 + 100 * Math.random();
  lCounter++;
 }
 counter++;
}

（ono.makeTextが歌詞を出す命令）

これで歌詞に対応するメロディが流れるタイミングで歌詞が流れます。

このような感じで、その気になればflashでカラオケが作れる、、かもしれませんが、カラオケの場合はメロディが流れる前に歌詞を表示する必要があるので、もうひと工夫必要になるでしょう。

今回解説に入れたコードは、wonderflのこちらで確認することができます。

 

それでは！