1. はじめに
クリスマスシーズンが到来し、街中でクリスマスキャロルを耳にする機会が増えてきましたね。
私は普段Webエンジニアとして働きながら、趣味でサックスを演奏しています。
今回は、プログラミングと音楽を組み合わせて、Qiita上でクリスマスキャロルを演奏してみたいと思います！
qiitaでクリスマスキャロルを演奏するという目標達成にあたり、
abcjsというJSライブラリを採用しました。
abcjsの特徴は以下の通りです。
- 「ABC記法」（テキストベースのシンプルな楽譜記述法）での記譜
- SVGでの楽譜レンダリング
- MIDI再生機能の実装
- レスポンシブ対応
- 軽量で導入が容易
2. ABC記法について
楽譜の基本情報
X:1 // 曲番号（必須）
T:Joy to the World // タイトル
M:2/4 // 拍子。2分の2拍子を表す（1小節に2拍）
L:1/8 // 基準の音符の長さ。ここでは8分音符
Q:96 // テンポ指定
K:D // 調性。ここではニ長調（D major）
音符の書き方
基準が8分音符(L:1/8)なので、数字がない場合は8分音符となります。
D // 8分音符のレ
D2 // 4分音符のレ（8分音符の2倍）
D3/2 // 付点8分音符のレ（8分音符の1.5倍）
D4 // 2分音符のレ（8分音符の4倍）
実際の楽譜の一部を例に解説
1番上のパート（1st Violin）の冒頭部分を見てみます。
d2 c3/2B/2| A3 G |
d2 // 4分音符の高いレ（8分音符×2）
c3/2 // 付点8分音符の高いド（8分音符×1.5）
B/2 // 16分音符のシ（8分音符×0.5）
A3 // 付点4分音符のラ（8分音符×3）
G // 8分音符のソ
その他の記号の説明
// 小節線と装飾
| // 小節線
|| // 終止線
(Dd2)B // ()内の音符をスラーで結ぶ
// 強弱記号
!p! // ピアノ（弱く）
!mp! // メゾピアノ（やや弱く）
!mf! // メゾフォルテ（やや強く）
!f! // フォルテ（強く）
// パート設定
V:1 // パート1の開始
%%MIDI program 40 // 音色設定
3. 実装してみました
音量が大きいため、端末の音量設定を極小にしてお楽しみください。
See the Pen Untitled by 飯山若奈 (@acciplsk-the-animator) on CodePen.
工夫したポイント
音楽表現の向上
楽譜上の強弱記号とMIDI音量を連動させ、より自然な演奏表現を実現しました。
クリスマスらしいデザインへのカスタマイズ
- 演奏を追跡するカーソルと演奏中の音符の色
- 音符をクリックした時の色
- 下部の再生ボタンとプログレスバー
実装上の課題
開発環境について
CodePenを初めて使用したため、使い方の習得に時間を要しました。
ただし、環境構築の手間が省けたため、結果的には良い選択だったと感じます。
生成AIの活用と限界
- JavaScriptでの実装支援としては大変有効でした。
- 「『もろびとこぞりて』をABC記法で出力して」と依頼したり、楽譜のファイルを添付して読み込ませたりしてみましたが、全く違う曲（知らない曲）が生成されました🤦♀️
- サックス用の移調を依頼すると不協和音が発生1
技術的な課題
- MIDI音源の全体の音量調整に苦心
- 音量調節のお手間をおかけしすみません。
- 個別の音符をクリックして音を鳴らす機能は、時間の都合で断念しました。
印象的だった点
- 音楽面での達成
- 4声が綺麗にハモって出力された瞬間
- 強弱記号による表現の幅の広がり（今回は時間の都合で一部のみ実装）
- 技術面での発見
- プログレスバーで再生位置を指定すると、該当の小節/音符がハイライトされる
4. 終わりに
- 普段から楽譜には馴染みがありますが、JSを使用して記譜するというのはとても新鮮な経験でした。
- 年末にかけてお忙しい方も多いかと思いますが、皆様素敵なクリスマスをお過ごしください🎄✨
-
ヴァイオリンの「ド」とサックスの「ド」は別の音が出ます。ヴァイオリンの「ド」をサックスで表現するためには、「ラ」を出す必要があります（アルトサックスの場合） ↩