メロディを奏でよう！音楽をテーマにしたコードスニペット13選

Webサイトやモバイルアプリの制作は、プログラマーの「仕事」です。でもたまにはアーティストのように創造力を発揮して、コーディングの可能性を探ってみるのも楽しいですよ。

「音楽とコーディング」は、実は密接に関係しています。音楽が人に良い影響を与えることは広く知られており、プログラマーもこの例外ではありません。実際に、多くのプログラマーはヘッドフォンで音楽を聴きながら作業をしています。音楽はクリエイティビティを刺激してくれるのです。

今回は、巧みに再現されたピアノからユニークなビジュアライザーまで、音楽に関するコードスニペットを13種類ご紹介します。

楽器をモチーフにしたスニペット

現実世界では見慣れた楽器も、画面の上で演奏すると新しい魅力を発見できるかもしれません。

以下では実在する楽器をモチーフにしたコードスニペットを6つご紹介します。

1. キーボードで演奏できるピアノ

Chris Woelkは、コーディングによりピアノのデジタル化に成功しました。

マウスやキーボードを使って鍵盤を演奏できます。ぜひ実際に試して、その感動を味わってください。

See the Pen
Piano (A digital musical instrument) by Chris Woelk (@cawoelk)
on CodePen.

2. マウスのスライド／ホバーで演奏できる木琴

次にご紹介するのは、Greg Hovanesyanが制作した木琴。音盤を叩くためのマレットも再現されています。

Web Audio APIのオシレーターを駆使して音域を広げてあり、ユーザーは本物の木琴を叩いているような体験ができます。

クリックではなく、マウスのスライドやホバーで演奏する形式です。

See the Pen
Play the Xylophone (Web Audio API) by Greg Hovanesyan (@gregh)
on CodePen.

3. クリスマスソングを奏でる鉄琴

Wilder Taypeのスニペットは、鉄琴をモチーフにしています。

子供時代を思い出させるようなデザインと音が特徴です。カラフルでかわいらしい鉄琴はマウスで演奏できるだけではなく、クリスマスソングの自動演奏機能も付いています。

See the Pen
Christmas Sounds by WILDER TAYPE (@wilder_taype)
on CodePen.

4. 鍵とピアノが合体

Rominaの制作したスニペットは、ピアノだけでなく鍵もデザインに取り入れています。

今までご紹介したスニペットと比べて洗練されたデザインとはいえませんが、アイデアは斬新で面白いです。シンプルながらもしっかり1オクターブ分の鍵盤があります。

See the Pen
Codevember #22 – Key by Romina (@RominaMartin)
on CodePen.

5. 弦を揺らすと音符が飛び出すギター

ギターもピアノや木琴・鉄琴と同じく、プログラマーに人気の楽器です。LegoMashroomの制作したギターは、音を出すことはできないものの、弦をかき鳴らすアイデアが採用されています。

9本ある弦を振動させると、音の代わりにカラフルな音符が表示さる仕組みです。

なおこのスニペットに使用されているのは、Paper.jsとWeb Audio APIです。

See the Pen
Music Time! by LegoMushroom (@sol0mka)
on CodePen.

6. 伴奏機能付きのギター

木琴を作ったGreg Hovanesyanは、ギターも制作しています。

ギターのイラストには演奏機能はなく、演奏には画面上部の鍵盤を使います。

プレイボタンを押すと伴奏が流れるため、この伴奏にあわせて演奏することも可能です。何も考えずにジャカジャカいじるだけでも楽しいですよ。

See the Pen
The Bluesman – You Can Play The Blues (Web Audio API) by Greg Hovanesyan (@gregh)
on CodePen.

ビジュアライザーのコードスニペット

かつて人気を集めた、音楽のビジュアライゼーション。

今ではあまり特別なものではありませんが、当時はとても画期的な存在でした。

今回はユニークなビジュアライザーを2つご紹介します。

7. ボックス型のビジュアライザー

Three.jsを使ったNelson Rodrigues制作のビジュアライザーは、音楽に反応して3Dのバーが上下に動きます。

クリックするとあらかじめ用意された音楽が流れます。

See the Pen
Three.js sound visualization by Nelson Rodrigues (@nelsonr)
on CodePen.

8. 好きな曲で楽しむビジュアライザー

Zach Saucierの制作したビジュアライザーは、好きな曲をアップロードして楽しめる優れもの。

コントロールセンターでは、長方形の数や境界線の幅、プリズムの半径、色などを設定できます。

See the Pen
Prism music visualizer by Zach Saucier (@Zeaklous)
on CodePen.

シンセサイザー（電子楽器）のコードスニペット

最後のジャンルは、画面上での演奏にぴったりのシンセサイザー（電子楽器）。

5つのスニペットをご紹介します。

9. クリック＆ドラッグで演奏するシンセサイザーパッド

Matt Westの制作したスニペットは、グリッド内をクリック＆ドラッグするだけで演奏できるシンセサイザーパッド。

Web Audio APIが使われています。

See the Pen
Web Audio API Demo (Synth Pad) by Matt West (@matt-west)
on CodePen.

10. ネオンカラーのドラムマシン（サンプラー）

Nicholas By Designは、ネオンカラーのドラムマシン（サンプラー）を制作しました。それぞれ9種類のサウンドが割り当てられており、これらをミックスして演奏します。

操作はすべてキーボードで行います。

See the Pen
jQuery SoundCloud Mini-board by Nicholas By Design (@NicholasByDesign)
on CodePen.

11. 遊びごころあふれるドラムキット

Katherine Katoのドラムキットは、小さいながらもエキサイティングに遊べるスニペットです。

Nicholas By Designのものと同じく、キーボードを使って9種類のサウンドを組み合わせて演奏できます。

See the Pen
#JavaScript30 Day 1: JS Drum Kit by Katherine Kato (@kathykato)
on CodePen.

12. 文字から曲ができる不思議なジェネレーター

今回ご紹介するものの中でも特にユニークなのが、Jake Albaughが制作したこちらのスニペット。

ユーザーが文字を入力すると、その文字をもとにオリジナルの楽曲が生成され、楽譜が表示されます。この曲はMIDIファイルとしてダウンロードすることも可能です。

See the Pen
Seeded Procedural Music Generator by Jake Albaugh (@jakealbaugh)
on CodePen.

13. 機能豊富なアルペジエーター

こちらもJake Albaughによるコードスニペットです。

コード進行、モード、タイプ、スタイルなどさまざまな要素を操作できる超大作。あまりに機能が豊富なので、宇宙船のコントロールセンターのようにも見えます。

彼はこの他にも、Tone.jsなどを駆使してさまざまな作品を制作しています。

See the Pen
Musical Chord Progression Arpeggiator by Jake Albaugh (@jakealbaugh)
on CodePen.

おわりに

プログラマーは、コードやコマンドを機械的に入力する仕事だと思われているかもしれません。しかし、こうしたコードやコマンドを使ってすばらしい作品をつくれるのです。

コードは詩のようなものです。詩に音楽を加えれば、ミュージカルやオペラにもなり得ます。コードに音楽という要素を加えて、ユーザーを魅了するユニークな作品を作ってみましょう！

（原文：Nataly Birch 　翻訳：Asuka Nakajima）