weva
🔎Webアプリを探す
🎹

Webで使える作曲・音楽ツールまとめ(DAW・DTM・シンセサイザー)

2025.12.07

Web上で使える音楽ツールをまとめました。

一昔前なら音楽系のアプリケーションは C++ や Objective-C で開発したものでないとレイテンシーが起きてしまうことが多かったですが、最近ではWeb Audio APIが充実したおかげで JavaScript だけで音楽アプリを開発しやすくなってきています。

Soundtrap

spotify-daw

音楽ストリーミングサービス大手のSpotifyが運営するWebベースのDAWです。

クラウド上で他の人と共同編集を行えます。プロジェクトへの招待も簡単にできます。

無料プランでも無制限にプロジェクトを作成でき、100種類以上のインストゥルメントとサウンド、エフェクト等が用意されています。

また、作ったコンテンツは簡単にYoutubeとSoundCloudに公開できます。

有料プランではPodcastをSpotifyで配信することも可能です。

リンク:

Soundtrap

SOUNDRAW

soundraw

ムード・ジャンル・曲の長さ・テンポ・楽器などをクリックで選択して、

「CREATE MUSIC」ボタンを押すだけで、選択項目に沿った音楽が自動作曲されるサービスです。

自動作曲される曲は1つではなく、複数のパターンが作成されます。

気に入った曲ができれば、それをベースに更にパラメータを調整することもできます。

リンク:

SOUNDRAW

Soundation Studio

daw1

Webブラウザ上で実行できるDAWです。

仮想キーボードやMIDIサンプル、シンセ音源、オーディオトラックなど機能豊富です。もちろん録音もできます。Web Audio API経由なので、録音前にマイクアクセスを許可するポップアップでOKをクリックする必要があります。

SoundationはWebプラットフォームのようにもなっており、作った曲の共有サイトとしても利用できます。

利用するにはユーザ登録が必須です。GoogleかFacebookのアカウント連携でも利用可能です。

リンク:

Soundation Studio

WebAudio Designer

daw4

WebAudio API で使える部品をGUI上で組み合わせて音をデザインできるツールです。

GUI上にノードを複数作ってそれぞれをつなぎ合わせて音を加工でき、コントローラ(音量調節のフェーダーやノブ、キーボード、スイッチ等)を繋いで音の発声や音程・音量のコントロールができます。

Add Controller の中の Functionや、Add Nodeの中のScriptProcessorは、選択すると中身の関数を書き換えることができます。

WebAudio APIを使ってなにかを作りたいと思ったとき、このWebAudio Designerを使ってプロトタイプを組み立てられるかもしれません。

GitHubでソースコードを見ることができます。

https://github.com/g200kg/webaudiodesigner

リンク:

WebAudio Designer

CUBIC SEQUENCER

daw2

3次元にキューブを配置することで音を鳴らすシーケンサーです。

幻想的なグラフィックと音色が特徴的です。

他にも複数のWebAudio関連のアプリがサイト上に公開されています。

https://mohayonao.github.io/

リンク:

CUBIC SEQUENCER

WebAudioSynth

daw5

アナログシンセのWebアプリです。

音だけでなくノブなどのデザインも凝っています。

ソースコードもGitHubで見ることができます。

https://github.com/aike/webaudiosynth

リンク:

WebAudioSynth

ARPEGGIOS

daw6

Chrome ExperimentsのChrome Music Lab というサイトで紹介されている音楽アプリのうちの1つです。

再生ボタンを押して、和声を選択することで、その和声のアルペジオが演奏されます。手軽にコード進行を演奏することができます。

サイトには他にも音楽アプリがいくつか存在しています。

https://musiclab.chromeexperiments.com/Experiments

リンク:

ARPEGGIOS

Beat Blender

daw7

リズムマシンのWebアプリです。

左側にある虹色のゾーンに線を描くと、その位置に合わせてドラムパターンが遷移します。

線を描くことでパターンを遷移させる点が面白いと思います。

他にも実験的なデモアプリが存在しています。

https://magenta.tensorflow.org/demos

リンク:

Beat Blender

LOOM

daw8

四角の中に線を描いて再生するシーケンサーです。

描いた線を回転させながら再生することもできます。

また、スケールを下のメニューで選ぶこともできます。

とても実験的な作品で面白いと思いました。

ただ、最新版のChromeではなぜか音が鳴りませんでした。FirefoxかSafariだと音が鳴ります。

リンク:

LOOM

Performance RNN

daw9

Tensorflow.js を使ったMagentaというプロジェクトのデモアプリです。

AIによって自動演奏されるピアノアプリで、ConditioningをOnにすることで演奏する音数と音階を調節できます。

Note Density のスライドバーで音数を調整できます。小さいほど落ち着いた演奏、大きいほど激しい演奏になりやすいです。

リンク:

Performance RNN

音の鳴る庭

kinetic-sound-garden

庭に草花や木、石、風鈴などを置いていくと、その配置がそのまま音楽になる作曲ツールです。

デイジー・スズラン・ヒマワリ・バラといった植物ごとに音が割り当てられていて、置く場所と種類を変えるだけでフレーズが変わります。ルート音とスケールを選べるので、音楽の知識がなくても外れた音になりません。

譜面を書く形式のDAWが苦手な人でも、庭を作る感覚で曲を組み立てられます。作った庭は保存でき、散策モードで中を歩き回ることもできます。

リンク:

音の鳴る庭

WebAudio APIを学ぶ

WebAudio APIについて学ぶには、WEB SOUNDERというサイトが情報が豊富で学びやすいです。

WEB SOUNDER: http://curtaincall.weblike.jp/portfolio-web-sounder/

関連する記事

💿️
Web上で音声(オーディオ)を録音するサービスまとめ
🎲
席順・順番・当番をその場で決められるWebアプリまとめ
🎯
実技テストで適性・センスを客観採点できるWebアプリまとめ
🎨
Web上で絵が描けるペイントツールまとめ
✂️
無料で使える画像切り抜き・背景透過Webアプリまとめ
💻️
プログラマのコーディング力を向上させるWebサイトまとめ
weva
Webアプリを探す話題のニュース仕事探し個人開発ニュース
運営者情報お問い合わせ利用規約プライバシーポリシー
© 2026 Weva.dark_typeA_115x57.png