2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

コードも書きたいし音楽も作りたいな……せや!

Last updated at Posted at 2025-12-13

Strudelとの出会い

コードを書くのも音楽を作るのも好きなのですが、それぞれ別の時間を確保するのが難しいです。

どちらにも時間を使いたいのにな……と思っていたときに、YouTubeでたまたまこの動画を見つけました。

コードでリアルタイムに音楽を作っていく様子を見て、これなら両方楽しめそうだと思い試してみました。

Strudelとは

Strudelは、JavaScriptでTidal Cyclesのパターン言語を実装したライブコーディング環境です。

Tidal CyclesはHaskellで書かれたライブコーディングシステムで、コードでパターンを記述して音楽を即興演奏できるツールです。

StrudelはそのTidal Cyclesの考え方をJavaScriptに移植したもので、ブラウザ上で動作します。

インストール不要で、コードを書くだけで音楽を作れます。
そして、Haskellの知識がなくても、JavaScriptの基本的な文法だけで始められる設計になっています。

主な特徴は以下の通りです。

  • ブラウザだけで完結(インストール不要)
  • サンプル音源やシンセサイザーが最初から使える
  • コードを変更するとリアルタイムに音が変わる
  • MIDIやOSCにも対応している

公式のGetting Startedを見ながら、とりあえず何か作ってみることにしました。

ドラムンベース風のフレーズを作ってみた

私はベースミュージックが好きなので、まずはドラムンベース風のフレーズを作ってみました。

完成したものはこちらです。

コードも載せておきます。

setcpm(180/4)

$drums:
  stack(
    sound("bd - - - - bd - -").bank("RolandTR909"),
    sound("- - sd - - - sd -").room(0.05).bank("RolandTR909"),
    sound("hh*16").gain("[0.1 0.4 0.2 0.3]*4").room(0.1).bank("RhythmAce"),
    sound("<- oh>*8").gain(0.2).bank("RolandTR909"),
    sound("rd*4").gain(0.2).bank("RolandTR909"),
  )

$bass:
  note("<a1*8 f2*8 g2*8 e2*4>").sub("[0 12]*4")
    .sound("sawtooth")
    .resonance(20)
    .delay(0.1)
    .gain(0.4)

$pad:
  note("<a2 f2 g2 e2>")
    .sound("square")
    .hpf(1000)
    .gain(0.3)
    .delay(0.2)
    .room(0.3)

ドラムパート

stack()で複数のドラムパターンを重ねています。
bd(バスドラム)、sd(スネア)、hh(ハイハット)、oh(オープンハイハット)、rd(ライド)を組み合わせて、ドラムンベースらしいリズムを作りました。

基本はRolandTR909を使いましたがハイハットの音だけはしっくり来なかったのでRhythmAceを指定しています。

キックを基準にしてgain()で音量を調整し、なんとなく耳で聞いて物足りなかった箇所にroom()でリバーブを追加しています。

ベースライン

note()でコード進行を指定し、sub()でオクターブ違いの音を追加してベースラインに厚みを出しています。
sound("sawtooth")でノコギリ波のシンセサイザーを使い、resonance()でフィルターの効きを強めています。

パッド

コード進行に合わせてsquare波のシンセサイザーを鳴らしています。

hpf(1000)でハイパスフィルターをかけて低域をカットし、ベースと住み分けるようにしました。

delay()room()で空間系エフェクトを追加しています。

もっと効率的な書き方もあるらしい

調べてみると、superimpose()add()など様々な関数があったり、共通の設定をまとめる方法があったり、より効率的なテクニックもあるようです。

ただ、今回は初めてだったので、まずは動くものを作ることを優先しました。
慣れてきたら、そういったテクニックも試してみたいです。

感想とこれからやってみたいこと

見よう見まねで作ってみましたが、コードを書くだけで音楽が鳴る体験は想像以上に楽しかったです。

これから挑戦してみたいのは、ライブコーディングでのDJや、イベントのBGMをインタラクティブミュージック化することです。

ゼルダやFFのように、状況に応じて音楽が動的に変化する仕組みをイベントに取り入れられたら面白そうだと思っています(参考記事)。

Strudelならコードで柔軟に制御できるので、そういった実験もできそうです。

まだ始めたばかりですが、少しずつパターンを増やしていきたいです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?