ブラウザで音楽やろうよ！ライブコーディング環境 Strudel のすすめ

1. はじめに

この記事は、NTTテクノクロスAdvent Calendar 2025 の8日目の記事です。

こんにちは、NTTテクノクロス こころを動かすデザイン室の鈴木雅貴です。業務では、デザイン関連のことをやりつつ、Web標準技術を軸に活動しています。最近外に公開されたものとしては、こちらの手描き風イラストを担当しました。

聴覚障がい者との相互理解を深める「ツナガル・ブック®」を改訂～多様な個性が輝く職場づくりを推進～ | 2025年度 | ニュース | NTTテクノクロス株式会社

本題です。本記事では、ライブコーディング環境の1つであるStrudelを紹介します。
「ライブコーディング？ん？面接とかでやっている、出された課題に対しその場でコーディングをしていく様子を見てもらうやつ？」と思う方もいるかもしれません。

しかし、ここでのライブコーディングは音楽のライブコーディングです。コードを書きながらリアルタイムで音楽を作り、演奏する環境です。

あれ、それって仕事とほぼ関係ないのでは？と思った方はほぼ正解！…なのですが、勉強会などのイベントで簡単なBGMが欲しくなるとき、ありますよね。そんなときにこの記事のことを思い出してください。そうでなくても、Webブラウザだけで手軽に始められて面白いのでみなさんもぜひ！というのが本記事の主旨です。音楽×プログラミングの喜びをあなたに！！！

本記事は、2025年11月末時点の情報に基づくものです。今後画面や仕様が変更される可能性があります。

2. Strudelとは？

Strudelは、Webブラウザ上で動作する音楽ライブコーディング環境です。

ライブコーディング環境というとTidalCyclesやSonic Piなどがありますが、セットアップが複雑でかなりとっつきづらいものでした。

Strudelは、TidalCyclesで使われていたパターンベースの音楽コーディングをJavaScriptに移植！Webブラウザさえあれば誰でも手軽にライブコーディングできるようになったのです！すごい！

公式サイトはこちら: 👉 https://strudel.cc/

ちなみにStrudel(シュトゥルーデル)はお菓子の名前で、薄く伸ばした層状の生地でリンゴ、レーズン、ナッツなどのフィリングを巻いて焼き上げたオーストリアのペストリーだそうです。りんごを巻いたアプフェルシュトゥルーデルが有名とのこと。

美味しそう。

ライブコーディング環境であるStrudelの特徴はこんな感じです。

特徴

• インストール不要：Webブラウザさえあればヨシ！
• 音源不要：音源も用意されている！
• 即時再生：コードを書いてすぐに音が鳴らせる！
• JavaScript使用：比較的多くの人が触っているJavaScriptを使えちゃう！(TidalCyclesはHaskellだったのです…)
• MIDI/OSC対応：その筋の人は外部機材やソフトウェアと一緒に使える！

おかげでこんないいことが。

• 即時フィードバック：制作時の試行錯誤が楽。変更が即座に反映される点はライブパフォーマンスにぴったり。
• サンプルやプリセットの活用：よくわからなくても、既存のサンプルや音源を使ってすぐに音が鳴らせる。
• 他機材との連携：既存音源では物足りない人もシーケンサとして使い、外部ソフトやハードを鳴らせる。
• 教育・ワークショップでの導入の容易さ：インストール不要でブラウザだけで使えるので、イベントやワークショップで利用しやすい。

どうですか？ちょっと試してみたくなりませんか？

では早速やってみましょう！

3. 実際に触ってみよう（ハンズオン）

音が出ます。ロケーションにあわせてヘッドホン等をご用意ください。また突然の大音量でびっくりしないよう、最初はボリュームを小さめにしておくことをおすすめします。

Step 1. Strudelにアクセスしよう

公式のライブコーディングページへアクセスします。

👉 https://strudel.cc/

左半分がStrudelのREPL(対話型実行環境、コードを入力するとすぐ結果が返ってきて次の入力が可能になる)となっていて、そこでライブコーディングができます。

Step 2. 音を鳴らそう

REPLにはコードが書かれていますね。それを鳴らしてみましょう。
画面右上にある「play」をクリックすると、書かれたコードが評価され、音がなります。
音を鳴らしている間は「play」が「stop」になります。その「stop」を押すと、音が止まります。

クリックが面倒くさいって人向けにキーボードショートカットも用意されています。便利…

• play(評価・再評価) → Ctrl + Enter もしくは Alt + Enter
• stop → Ctrl + . もしくは Alt + .

Step 3. ドラムを鳴らそう

まずはシンプルなコードということで、ドラムを鳴らしましょう。音が鳴りっぱなしでかまいませんので、既存のコードを消して、以下のコードをそのまま入力してください。

コードを変更しただけでは音は変わらないので、停止→再生するか、Ctrl + Enterで再評価すると、コードが再生されます。

// 4分キック
s("bd bd bd bd")

バスドラム(キック)がなり続けます！やった！

このコード、なにをしているかといいますと…

• s(...) は 音を鳴らす関数です。sound(...)とも書けます。
• bd は バスドラムのサンプル名です。
• bdを4つ並べることで、バスドラムを4回鳴らします。

バスドラム以外も入れちゃいましょうか。

s("bd hh sd hh")

hhはハイハット、sdはスネアドラムです。こんな感じで、サンプル名を書いてあげればその音がなります。それっぽさが増しましたね！

ドラム関連だとこんなサンプルが用意されています。

サンプル名	意味
bd	bass drum（バスドラム）
sd	snare drum（スネア）
rim	rimshot（リムショット）
hh	hihat（ハイハット）
oh	open hihat（オープンハイハット）
lt	low tom（ロータム）
mt	middle tom（ミドルタム）
ht	high tom（ハイタム）
rd	ride cymbal（ライド）
cr	crash cymbal（クラッシュ）

ドラムだけでもいろいろありますね！

Step 4. テンポの話

書くだけで音がなるんなら、いろいろ突っ込んで鳴らしたくなりますよね。ということでいろいろ書いてみましょう。

s("bd hh sd bd ht mt lt cr")

あれ、テンポが速くなった？テンポを指定してないのになぜ？

Strudelにおけるテンポの扱いはちょっと変わっています。一般的なDTMソフトではBPM(beats per minute、1分間に刻む拍数)でテンポを指定するのですが、Strudelではサイクル(Cycle)という概念を使用し、テンポをCPS(cycles per second)で表現します。0.5CPSみたいな感じです(StrudelのデフォルトCPSは0.5です)

で、サイクルってなんなのか。0.5CPSってどういうことなのか。以下のコードをもとに解説していきましょう。

s("bd hh sd hh")

前述のコードではs()の中に書かれたものが1サイクルにあたります。1サイクルでbd hh sd hhを鳴らすわけですね。

で、0.5CPSということは、1秒で0.5サイクル→2秒で1サイクル(bd hh sd bd hh)を鳴らす速さということです。

なので、サイクル内にたくさん書くと、テンポ感としては速くなったと感じるわけですね。

Strudelではsetcps()を使ってCPSを指定します。1CPSにするにはこんな感じ。

setcps(1)
s("bd hh sd hh")

倍速！

ただ、CPSってBPMを使ってやってきた人たちには正直わかりづらい概念です。ってことで、CPM(cycles per minute)という単位と、それに対応するsetcpm()が追加されています。1サイクル4拍分とするなら、setcpm()を使い、指定したいBPMを4で割ればBPMを使って指定できちゃいます。しかも、JavaScriptなので/4って書けばいいだけ！

テンポについてはここまで。続いて音をもう少し変えていきます。

// 4ビートを120BPMで
setcpm(120/4)
s("bd hh sd hh")

Step 5. もう少し凝った書き方

ハイハットは常に刻んでおきたいよね、という場合はこんな書き方ができます。

s("bd - sd -, hh*8")

-はいわゆる休符です。bd - sd -は1拍目にbd、3拍目にsd、2,4拍目は音を鳴らさないということです。

hh*8はhhを8つに割って繰り返します。本来hhが入るところを8分割してhhを入れるので、細かく刻む感じになります。ちなみに割らずに繰り返すにはhh!8と書きます。

そして、シーケンスを,で区切って書くと、それらを同じサイクル内で並列に鳴らせます。前述のコードではbd - sd -とhh*8を、同じサイクルで鳴らしているわけです。

これを使えばポリリズムも簡単に書けるわけでして、たとえば3拍子と4拍子のポリリズムをやりたいなーとなると、

s("hh*3, hh*4")

こんな感じ。このあたりはサイクルという概念を使っているからこそって感じですね。

一部だけ細かく刻みたい場合にはサブシーケンスが使えます。

s("hh hh [hh hh hh] hh")

[]で囲ったところが1単位になるので、その中に刻みたいシーケンスを書きましょう。前述のコードは3拍目でhhを3回鳴らすようにしています。

サブシーケンスは入れ子にできるので、

s("hh hh [hh hh [hh hh]] hh")

みたいなこともできます。

コーディングっぽさが増してきましたね！

Step 6. ドラムの音を変える

次はドラムの音を変えてみましょう。REPL右側にある「sound」タブを選び、少し下の「drum-machines」を選択すると、たくさんのドラムマシン風サンプルが表示されます。「Search」から絞り込みもできます。

それっぽい名前がたくさんありますが…今回はその中から宇宙っぽいspacedrum_bdを。そのアンダースコア手前までを使って、こんな感じに指定してみましょう。

s("bd - sd -, hh*8").bank("spacedrum")

bdやsdといった役割はそのままに、ドラムのセットが入れ替わり、音が変わりました。この指定によって、このように入れ替わったのです。

• bd → spacedrum_bd
• sd → spacedrum_sd
• hh → spacedrum_hh

このように、bank()はアンダースコアの前にある名前を使って、ドラムセットをまるっと入れ替えることができます。

bank()を使わず、サンプルを個別で指定することもできます。

s("spacedrum_bd - spacedrum_sd -, spacedrum_hh*8")

このように個別指定すれば、hhだけ違う音にすることもできます。

Step 7. ドラム以外の音を鳴らす

ドラムにあわせて違う音を鳴らしてみましょう。note()で音階を、s()で鳴らしたいサンプルを指定します。

s("bd - sd -, hh*8")
note("c e g b").s("sine")

c e g bでドミソシの音階が鳴ります。cとかeはいわゆるドレミのアルファベット表記(英米式音名)ですね。またその音をサイン波(sine)で鳴らすよう指定しています。

再生してみると、あれ、一つしか鳴らない…そう、最後しか評価されません。
複数行のパターンを同時に評価して鳴らしたい場合は、行頭に$: をつけます。

$: s("bd - sd -, hh*8")
$: note("c e g b").s("sine")

同時に鳴りました！かっこいい！

サイン波はピュアすぎてって方は、REPLの右にある「sounds」タブ→少し下の「samples」や「synths」を選ぶと、たくさんサンプルがあります。

いろいろ試してみてください。たとえば矩形波squareにすると、古いゲーム機っぽくなりますよ。

音階のオクターブを変えたいときは、音にオクターブを表す数字を付けます。数字を付けてない状態が3に対応しており、数字が減るとオクターブ下、増えるとオクターブ上になります。

$:s("bd - sd -, hh*8")
$:note("c3 e3 g2 b4").s("sine")

シャープは#、フラットはbをつけます。フラット記号がシと同じなのは、人によっては気持ち悪いかもしれませんね。

$:s("bd - sd -, hh*8")
$:note("c3 eb3 g2 bb4").s("sine")

ドラムとメロディを同時に鳴らすと、曲らしくなりましたね！

Step 8. 音の長短をつける

割るくらいしかやってない音の長短ですが、こんなこともできます。@nで、n倍の長さにできます。

$:s("bd - sd -, hh*8")
$:note("c e g@2").s("square")

とすると、gが2倍の長さになります。

$:s("bd - sd -, hh*8")
$:note("c e g@1.5 b@0.5").s("square")

みたいに、整数以外もできます。

Step 9. 繰り返しごとに音を変える

もう少しコーディングならではなこともやってみましょう。

<..>を使うことで、繰り返しごとに音を変えることができます。たとえばこんな感じ。

$:s("bd - <sd cp> -, hh*8")
$:note("c <e eb> g <b b*4>").s("<sine piano>")

<sd cp>で、sdとcp(クラップ)が各サイクルで交互に鳴ります。

他も同様で、<e eb>はeとebを、<b b*4>はbとbの4つ刻みを、<sine piano>はsineとpiano(ピアノ音)を交互に鳴らします。

工夫すれば、ちょっとした展開もこんな感じで書けてしまいます。

$:note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>").s("square")

Step 10. エフェクトをかけよう

最後に出音をいじりましょう。なんとエフェクト(音響効果)もかけられます。

さっそくローパスフィルター(low pass、指定周波数以下を通し、それ以上はカットする)をかけてみましょう。lpf()を使います。

note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>").s("square").lpf(200)

音がこもりました。いわゆるLo-Fiっぽくなりますね。数字の200を1000にすれば、より高い周波数の音が通るので、音が明るくなります。

この数字もシーケンス的に変化させられます。

note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>").s("square").lpf("1000 200 800 200")

ここではローパスフィルターのみの紹介に留めますが、エフェクトは他にdelay()やroom()(リバーブ)、いわゆるADSRを変えられるadsr()など、いろいろあります！すごい！

もう少し知りたい方は公式の First Effects 🌀 Strudel を見てください。

長くなりましたが、これでStrudelの基本的な使い方はだいたいわかったはずです。これだけでもかなり遊べるはず！

Step 11. 画面にフィードバックしよう

大事なのを忘れてました。ライブコーディングといえば画面へのフィードバック！ということで、最後に.punchcard()を追加し、再生してみてください。

note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>").s("square").lpf("1000 200 800 200").punchcard()

なんと、音にあわせたアニメーションが表示されます！これぞライブコーディングって感じありますね！お手軽にこんなことまでできちゃうなんてStrudel、すばらしい！

punchcard()以外にもいろいろあるので、Visual Feedback 🌀 Strudelを参考にいろいろ遊んでみてください。

4. まとめ

これまで紹介してきたように、Strudel は「ブラウザだけでライブコーディングできる」という手軽さがありながらも、パターン生成・エフェクト・視覚フィードバックと、かなり本格的な音楽制作ができる強力なツールです。

コーディングを楽しんでいる人にとっては、コーディング的な手触りで音楽を作れるというその行為そのものがたまらないと思います。

少しでも気になったあなた！いまこれを見ているWebブラウザで公式サイトREPLにアクセスして、音を鳴らしてみてください。楽しいですよ！
今回紹介したこと以外にもまだまだできることがあります。例えば特徴で紹介したもののここでは触れていないMIDI等外部機材のコントロールとか…詳しくはStrudel公式サイトドキュメントをご覧ください。

あなたのWebブラウザで新しい音楽体験を！

明日のNTTテクノクロスAdvent Calendar 2025 は、@tx-kwskによる音声・映像プロトコル関連と、@ShingoKamiyaによるAWS関連記事です。引き続きお楽しみください！

おまけ

某曲のイントロっぽいことをやってみようと作ったのですが、発音タイミングの影響か想定通り演奏されずちょっと悲しかったです…

$:s("hh*6")
$:s("numbers:1 numbers:2 numbers:3 numbers:4 numbers:5 numbers:6").speed(1.5)