音譜の行進隊

初音ミク「マジカルミライ 2021」 プログラミング・コンテスト応募作品

概要

• TextAliveAppAPIを利用して楽曲に合わせた演出を行うWebアプリケーションです。
• TextAliveAppAPIに対応した楽曲全てに対応しています。
• フレーズから生まれた音譜が、音楽に合わせて行進、ダンスする演出を楽しめます。
• 演出をただ眺めるだけではなく自分の手で音譜を生成し、演出を創り出すことができます。
• 偶然が生み出すランダムな演出によって、何度再生しても毎回異なる演出を楽しむことができます。

使用方法

利用準備

• 前提として、Node.jsがインストールされていること。(※動作確認をしたバージョンはnpm@7.20.0です)
• 以下のコマンドでプロジェクトのクローンと必要なモジュールのインストールをします。

git clone https://github.com/takanosuke/musical-note-march.git
cd musical-note-march/
npm install

開発サーバ起動

• 以下のコマンドで開発用サーバが起動します。ローカル環境でテストする際に利用します。

npm run dev

ビルド

• 以下のコマンドでdocsディレクトリ以下にビルド済みファイルが生成されます。

npm run build

操作方法

• 画面中央の再生ボタンを押すことで楽曲の再生ができます。
• 画面下の ^ ボタンを押すことでコントロールメニューが開き、楽曲の変更や再生位置の変更ができます。

演出

演出パターンは以下の5つに分かれています。

• オープニング
• メロディパート
• サビパート
• 間奏
• エンディング

オープニング

• 灰色の曲のタイトルが画面中央に徐々に吸い込まれていく演出です。吸い込まれた後にそこから1つ目のフレーズが生まれます。

※ 前奏がない楽曲の場合はこの演出がない or 短縮版の演出となります。

メロディパート

• 楽曲に合わせてランダムな位置にフレーズが出現します。
• フレーズが連続で同じ位置になったり、画面から見切れたりしないように工夫しています。
• 楽曲の声量に合わせて歌詞のサイズが変化します。まるで文字が歌っているような演出を楽しめます。
• 1つのフレーズに対して1つの音譜が生まれ、この音譜達がサビや間奏で演出を盛り上げます。
• 出現位置、色、音譜のサイズ、音譜の種類がランダムなので、毎回異なる演出を楽しめます。

サビパート

• フレーズから生まれたカラフルな音譜達が楽曲に合わせて楽譜の上を元気に行進します。
• よく見ると音譜の種類によって足の速さが違います。
• メロディパートと同様に、声量に合わせて歌詞のサイズが変化し、1フレーズに対して1つの音譜が生まれます。
• 楽譜上には楽曲のコード進行を表示しています。

間奏パート

• フレーズから生まれた音譜達が楽曲に合わせて元気に踊ります。

エンディング

• 生まれた音譜達が徐々に集まって円陣となります。
• 集まった音譜達は、オープニングで吸い込まれた曲のタイトルを引っ張って飛び出します。
• オープニング時は灰色だった曲のタイトルが、カラフルな音譜達の色で輝きます。

※ 後奏がない楽曲の場合はこの演出がない or 短縮版の演出となります。

機能

このアプリケーションには主に以下2つの機能があります。

• 音譜の手動生成機能
• 楽曲コントロール機能(TextAliveホスト未接続時)

音譜の手動生成機能

• 楽曲の再生中に画面をクリックすることで、任意の位置に音譜を生み出すことができます。
• 手動で生成した音譜達も他の音譜達と同様にサビや間奏、エンディングで動き出し、演出に加わります。
• 音譜は最大で30個まで生成でき、以降は最初に追加した音譜から消えていきます。
• 手動で追加した音譜はキーボードでdを入力することで全て削除できます。

※ エンディング時は音譜の生成/削除ができません。
※ 環境によっては音譜を追加しすぎると動作が重くなることがあります。

楽曲コントロール機能

• 画面下の ^ ボタンを押すことでコントロールメニューが開きます。
• コントロールメニュー内の v ボタンを押すことでコントロールメニューが閉じます。
• シークバーでは再生位置の確認と、楽曲の再生位置を自由に変更することができます。
• 楽曲の再生と停止、再生する楽曲の変更もできます。