How we created a soundboard using ElevenLabs SFX API

Imagine a soundboard that can generate unlimited sounds on demand. That’s exactly what we built at ElevenLabs — meet SB1, our infinite soundboard. On the surface, it looks like a typical grid of pads you trigger with clicks or keyboard shortcuts. Under the hood, it’s powered by our text-to-sound effects AI audio model. 

To use it you simply describe any sound you can think of, and SB1 will generate it. There are also some predefined default sounds, but even they can be replaced.

アイデアからプロトタイプへ

私たちはシンプルな質問から始めました。「柔らかな森林の音」や「劇的な観客の驚き」といった説明を入力して、すぐに使えるサウンドエフェクトを得ることができたらどうでしょうか？

従来のサウンドボードは、オンラインで探し出す必要がある静的なMP3ライブラリに依存しています。適切なサウンドを見つけても、それが「まさに」欲しいものではないことが多いです。しかし、生成AIを使えば、それはもう問題ではありません。制限がなくなります。

コードに飛び込む前に、Lovableを使って、SB1になる基本的なプロトタイプバージョンを作成しました。まだAPIに接続されていませんが、デザインの選択やボタンの配置を実験する機会を得ました。その後、優秀なチームが最終的なUIとコードを作成しました。

動的なコンテンツを求めていました—その場で生成される任意のサウンド。私たちのソリューションの核はElevenLabs SFX APIです。このAPIは単一のエンドポイントの背後にあります：

プロンプト、必要なバリエーションの数（デフォルトは4）、APIキーをAuthorizationヘッダーに含めたJSONペイロードを送信します。

レスポンスは生成されたWAVファイルのURL配列を返します。そこからストリーミングやダウンロードを行い、各クリップをパッドに割り当てることができます。ループ設定も可能です。詳細なプロンプトを使用して、より具体的なサウンドを生成してください。

サンプルリクエストは次のようになります：

そして、4つのURLの配列が返されます。APIはあらゆるユースケースにスケールするように設計されています—即席のサウンドボード作成からゲームアセットの大量生成まで。

SB1インターフェースの構築

APIが整ったところで、フロントエンドに取り掛かりました。SB1はReactとTailwind CSSで構築されたウェブアプリです。各パッドコンポーネントには2つのモードがあります：

1. プリセット: 保存されたサウンドURLセットから読み込み
2. カスタム: SFX APIを介してユーザーが生成

カスタムモードで空のパッドをクリックすると、プロンプトダイアログが表示されます。説明を入力し、生成を押すと、APIが4つのオプションを返します。それらをインラインで試聴し、お気に入りを選んでパッドが即座に更新されます。キーボードバインディングを使ってキーを押してパッドをトリガーし、リズムやサウンドキューをライブで再生できます。

ループコントロールも追加しました。ループボタンを押し、ループしたいサウンドをタップすると、解除するまで再生され続けます。これにより、SB1はジョークだけでなく、ドラムマシンやアンビエントな雰囲気、ポッドキャスト、ライブストリームのサウンドキュー、ガイド付き瞑想にも役立ちます。

実際の例

アンビエントサウンドスケープ

• 小雨: "葉に滴る小雨"

• 大雨: "トタン屋根に降る大雨"

• 海の波: 岸に打ち寄せる柔らかな波

「葉に滴る小雨」や「岸に打ち寄せる柔らかな波」といったプロンプトを送信して生成しました。それらのパッドをループ設定にし、集中や瞑想の背景を作り出しました。

ドラムマシン

• 808キック: "超低音の808キック"

• スネアヒット: "タイトなスネアスナップ"

• オープンシンバル: "鳴り響くオープンシンバル"

ドラムライブラリからオーディオサンプルを取得する必要はありません。「超低音の808キック」や「タイトなスネアスナップ」と説明するだけで、APIが4つのバージョンを提供します。それらをA、S、Dキーにマッピングして、ライブパフォーマンスデモを行いました。

モデルを本当に試したい場合は、キャラクターの声で短いボイススニペットを作成することもできます。キャラクターを指定し、括弧内に言葉を入れるだけです。

• 盛り上がったDJ: 盛り上がったDJが「パーティーを始めよう」と言う

• ミッション中のオーク: 荒々しい声のオークが「この部屋は定員オーバーだ」と言う

• セイレーンの歌: 魅惑的な女性ボーカルが「もう寝る時間だ、パーティーは終わり」と歌う

カスタムプリセット

自分のプリセットを保存して名前を付けることができます。例えば、「ライブストリームFX」として驚き、笑い、拍手を設定します。ボードを作成した後、共有をクリックしてリンクをコピーしたり、直接ソーシャルメディアに投稿したりできます。リンクを持っている人はあなたのSB1設定を読み込み、キュレーションされたサウンドを再生できます。

デベロッパーのポイント

• ステートレス生成: 各APIコールは独立しています。トレーニングパイプラインを管理したり、大規模なサンプルライブラリを保存する必要はありません。UIで使用するURLをキャッシュするだけです。
• 低レイテンシー: 通常の生成時間は2秒未満で、機能をデモする際には瞬時に感じられます。
• スケーラブル: 数百のサウンドを並行してバッチ生成し、高トラフィック用途のために独自のCDNに保存できます。
• 柔軟なフォーマット: 最高の音質を求めるならWAV、小さいファイルが必要ならMP3。

自分で始めるには、ドキュメントをチェックしてください。JavaScript、Python、cURLのコードサンプルがあり、SFX APIをプロジェクトに統合する方法を示しています。

次は何をする？

SB1は、私たちのサウンドエフェクトモデルができることの一例に過ぎません。OBSやデジタルオーディオワークステーション用のプラグインを探求しており、ストリーミングや制作ソフトを離れることなく新しいサウンドを生成できるようにしています。また、音楽関連のプロンプトでのパフォーマンスを向上させるためにモデルを微調整しています—エキゾチックなパーカッションやシンセテクスチャを考えてみてください。

何か素晴らしいものを作ったら、ぜひ見せてください。ソーシャルメディアでタグ付けするか、プリセットリンクを共有してください。ストリーマー、ポッドキャスター、ゲームデベロッパー、またはサウンドを楽しむ人であれば、SB1とSFX APIは無限のオーディオクリエイティビティを提供します。

無料で試してみてください — MP3ライブラリは不要です。