LoginSignup
1
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?

@timeless-residents(timeless residents)

【ステップバイステップ】Web Audio APIで音楽生成アプリ開発チュートリアル

Last updated at Posted at 2025-03-05

【ステップバイステップ】Web Audio APIで音楽生成アプリ開発チュートリアル

Web Audio APIは難しそうに見えるかもしれませんが、そんなことはありません！このチュートリアルでは、たった3つのステップで音楽生成アプリを構築します。作曲スキルは一切不要です。必要なのは基本的なJavaScriptの知識と好奇心だけです。さあ、一緒に音楽の旅に出発しましょう！

ステップ1：基本的なWeb Audio APIのセットアップ - 10分で完了！

まず、Web Audio APIを使うための環境を整えましょう。必要なのはブラウザとテキストエディタだけです！

Web Audio APIとは？

Web Audio APIはブラウザでオーディオを操作するための強力なインターフェースです。JavaScriptを使って音を生成、処理、空間化することができます。まるでブラウザの中に音楽スタジオがあるようなものです。

開発環境のセットアップ

  1. HTMLファイルの作成: index.htmlという名前のファイルを作成し、以下のコードを記述します：
<!DOCTYPE html>
<html>
<head>
    <title>Web Audio API Music Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button id="generateButton">Generate!</button>
    <script src="script.js"></script>
</body>
</html>
  1. CSSファイルの作成: シンプルなスタイリングのためのstyle.cssを作成します：
body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

button {
    padding: 1em 2em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
}
  1. JavaScriptファイルの作成: 以下の初期化コードでscript.jsを作成します：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const generateButton = document.getElementById('generateButton');

generateButton.addEventListener('click', () => {
    // コードはここに記述します
});

これでセットアップは完了です！ブラウザでindex.htmlを開き、ボタンが表示されていればOKです。

ステップ2：ランダム作曲の基本実装 - たった3行のコード！

さあ、音楽を生成してみましょう！スケールからランダムな音を使って、シンプルな音楽シーケンスを作ります。複雑な音楽理論は必要ありません。ランダム生成とWeb Audio APIの基本操作だけで、驚くほど簡単に音楽が作れます。

ランダム作曲アルゴリズム

  1. 音の選択: 特定のスケール（例：Cメジャースケール）からランダムに音を選びます。
  2. 音の長さの決定: 音の長さをランダムに決定します。
  3. 音の再生: 決定した音程と長さで音を再生します。

JavaScriptコード

以下のコードをscript.jsのgenerateButton.addEventListener関数内に追加します：

// Cメジャースケールの周波数
const notes = [261.63, 293.66, 329.63, 349.23, 392.0, 440.0, 493.88, 523.25]; // C4, D4, E4, F4, G4, A4, B4, C5

const playNote = (frequency, duration) => {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();

    oscillator.type = 'sine'; // 波形の種類 (sine, square, sawtooth, triangle)
    oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);

    gainNode.gain.setValueAtTime(1, audioContext.currentTime); // 音量
    gainNode.gain.setValueAtTime(0, audioContext.currentTime + duration); // duration秒後に音量を0にする

    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);

    oscillator.start();
    oscillator.stop(audioContext.currentTime + duration);
};

const randomNote = () => {
    const note = notes[Math.floor(Math.random() * notes.length)];
    const duration = Math.random() * 0.5 + 0.25; // 0.25秒から0.75秒のランダムな長さ
    playNote(note, duration);
};

// 5回音を鳴らす
for (let i = 0; i < 5; i++) {
    setTimeout(randomNote, i * 500); // 0.5秒間隔で音を鳴らす
}

このコードを実行すると、ボタンを押すたびに、Cメジャースケールからランダムに選ばれた音が、ランダムな長さで5回再生されます。

重要なポイント：

この例ではsetTimeoutを使って音を順番に鳴らしていますが、より滑らかな音の変化を作るにはAudioParam.linearRampToValueAtTime()を使うこともできます。これにより、音量や周波数を徐々に変化させることができます。

ステップ3：UI実装 - 直感的な操作で音楽をコントロール

アプリをもっとインタラクティブにするために、ピッチ、長さ、音量、波形タイプなどのパラメータをリアルタイムに調整できるUIコントロールを追加しましょう。

HTML/CSSの強化

index.htmlを以下の強化版に置き換えます：

<!DOCTYPE html>
<html>
<head>
    <title>Web Audio API Music Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Web Audio API Music Generator</h1>

        <button id="generateButton">Generate!</button>
        <button id="playNoteButton">Play Single Note</button>

        <div class="controls">
            <div class="control-group">
                <label for="noteSelector">Note:</label>
                <select id="noteSelector">
                    <option value="261.63">C4 (Do)</option>
                    <option value="293.66">D4 (Re)</option>
                    <option value="329.63">E4 (Mi)</option>
                    <option value="349.23">F4 (Fa)</option>
                    <option value="392.0">G4 (Sol)</option>
                    <option value="440.0">A4 (La)</option>
                    <option value="493.88">B4 (Si)</option>
                    <option value="523.25">C5 (Do)</option>
                </select>
            </div>

            <div class="control-group">
                <label for="oscillatorType">Oscillator Type:</label>
                <select id="oscillatorType">
                    <option value="sine">Sine</option>
                    <option value="square">Square</option>
                    <option value="sawtooth">Sawtooth</option>
                    <option value="triangle">Triangle</option>
                </select>
            </div>

            <div class="control-group">
                <label for="durationSlider">Duration:</label>
                <input type="range" id="durationSlider" min="0.1" max="2" step="0.05" value="0.5">
                <span id="durationValue">0.5s</span>
            </div>

            <div class="control-group">
                <label for="volumeSlider">Volume:</label>
                <input type="range" id="volumeSlider" min="0" max="1" step="0.05" value="0.7">
                <span id="volumeValue">0.7</span>
            </div>

            <div class="control-group">
                <label for="intervalSlider">Interval between notes:</label>
                <input type="range" id="intervalSlider" min="100" max="1000" step="50" value="500">
                <span id="intervalValue">500ms</span>
            </div>

            <div class="control-group">
                <label for="noteCountSlider">Number of notes:</label>
                <input type="range" id="noteCountSlider" min="1" max="10" step="1" value="5">
                <span id="noteCountValue">5</span>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

また、style.cssも以下のように更新してより良いスタイリングにします：

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 600px;
}

h1 {
    text-align: center;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
}

button {
    padding: 1em 2em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    margin: 10px 5px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

#playNoteButton {
    background-color: #2196F3;
}

#playNoteButton:hover {
    background-color: #0b7dda;
}

.controls {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.control-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

select,
input[type="range"] {
    width: 100%;
    padding: 8px 0;
    border-radius: 4px;
}

select {
    padding: 8px;
    border: 1px solid #ddd;
    background-color: white;
}

input[type="range"] {
    margin-bottom: 5px;
}

span {
    font-size: 0.9em;
    color: #666;
}

JavaScriptの強化

script.jsを以下の強化版に置き換えます：

// Web Audio APIの初期化
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// DOM要素の取得
const generateButton = document.getElementById("generateButton");
const playNoteButton = document.getElementById("playNoteButton");
const noteSelector = document.getElementById("noteSelector");
const oscillatorTypeSelect = document.getElementById("oscillatorType");
const durationSlider = document.getElementById("durationSlider");
const durationValue = document.getElementById("durationValue");
const volumeSlider = document.getElementById("volumeSlider");
const volumeValue = document.getElementById("volumeValue");
const intervalSlider = document.getElementById("intervalSlider");
const intervalValue = document.getElementById("intervalValue");
const noteCountSlider = document.getElementById("noteCountSlider");
const noteCountValue = document.getElementById("noteCountValue");

// Cメジャースケールの周波数
const notes = [261.63, 293.66, 329.63, 349.23, 392.0, 440.0, 493.88, 523.25]; // C4, D4, E4, F4, G4, A4, B4, C5

// スライダー変更時にUI値を更新
durationSlider.addEventListener("input", () => {
  durationValue.textContent = `${durationSlider.value}s`;
});

volumeSlider.addEventListener("input", () => {
  volumeValue.textContent = volumeSlider.value;
});

intervalSlider.addEventListener("input", () => {
  intervalValue.textContent = `${intervalSlider.value}ms`;
});

noteCountSlider.addEventListener("input", () => {
  noteCountValue.textContent = noteCountSlider.value;
});

// 現在の設定で単一の音を再生
const playNote = (frequency) => {
  // UIコントロールから現在の値を取得
  const duration = parseFloat(durationSlider.value);
  const oscillatorType = oscillatorTypeSelect.value;
  const volume = parseFloat(volumeSlider.value);

  // オーディオノードの作成
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();

  // オシレーターの設定
  oscillator.type = oscillatorType;
  oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);

  // ゲイン（音量）の設定
  gainNode.gain.setValueAtTime(volume, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(
    0.001,
    audioContext.currentTime + duration
  ); // スムーズなフェードアウト

  // ノードの接続
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);

  // 音の再生
  oscillator.start();
  oscillator.stop(audioContext.currentTime + duration);

  // ビジュアルフィードバック（オプション）
  const originalColor = playNoteButton.style.backgroundColor;
  playNoteButton.style.backgroundColor = "#ff9800";
  setTimeout(() => {
    playNoteButton.style.backgroundColor = originalColor;
  }, duration * 1000);
};

// Cメジャースケールからランダムな音を再生
const playRandomNote = () => {
  const randomIndex = Math.floor(Math.random() * notes.length);
  playNote(notes[randomIndex]);
};

// 選択した音を再生
const playSelectedNote = () => {
  const frequency = parseFloat(noteSelector.value);
  playNote(frequency);
};

// 音のシーケンスを生成
const generateSequence = () => {
  const noteCount = parseInt(noteCountSlider.value);
  const interval = parseInt(intervalSlider.value);

  // 以前のシーケンスをクリア
  let currentTimeouts = [];
  currentTimeouts.forEach((timeout) => clearTimeout(timeout));
  currentTimeouts = [];

  // 指定された間隔で音を再生
  for (let i = 0; i < noteCount; i++) {
    const timeout = setTimeout(() => {
      if (Math.random() > 0.5) {
        // 50%の確率で選択された音を使用
        playSelectedNote();
      } else {
        // 50%の確率でランダムな音を使用
        playRandomNote();
      }
    }, i * interval);

    currentTimeouts.push(timeout);
  }
};

// ボタンのイベントリスナー
generateButton.addEventListener("click", () => {
  // オーディオコンテキストが一時停止している場合は再開（一部のブラウザで必要）
  if (audioContext.state === "suspended") {
    audioContext.resume();
  }

  generateSequence();
});

playNoteButton.addEventListener("click", () => {
  // オーディオコンテキストが一時停止している場合は再開
  if (audioContext.state === "suspended") {
    audioContext.resume();
  }

  playSelectedNote();
});

// 表示値の初期化
durationValue.textContent = `${durationSlider.value}s`;
volumeValue.textContent = volumeSlider.value;
intervalValue.textContent = `${intervalSlider.value}ms`;
noteCountValue.textContent = noteCountSlider.value;

これで、すべてのパラメータを制御できる美しいUIを持つアプリができました。音、オシレータータイプ、長さ、音量、音間の間隔、生成する音の数を調整できます。

重要なポイント：

localStorageを使ってUI値を保存すると、セッション間でユーザーの設定を維持できます。また、ビジュアルフィードバック（ボタンの色変更など）を追加することで、タイミングの手がかりを提供し、ユーザー体験を向上させることができます。

ステップ4：応用編 - Magenta.jsを使ったAI音楽生成

次のレベルに進む準備はできましたか？Googleの開発したMagenta.jsライブラリを統合して、ブラウザ上でAIパワードの音楽を生成してみましょう！

HTMLファイルの作成

以下のコードで新しいファイルmagenta.htmlを作成します：

<html>
<head>
    <title>Simple Magenta.js Example</title>
    <!-- Magenta.jsをCDNから読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.0.0"></script>
    <script>
        // MusicVAEモデルのインスタンス作成（チェックポイントURLを指定）
        const model = new mm.MusicVAE(
            'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_vae/trio_4bar_lokl_small_q1');
        // 再生用プレイヤーのインスタンス作成
        const player = new mm.Player();

        // ユーザー操作で呼ばれるstart()関数
        function start() {
            // ボタンを非表示にする
            document.getElementById("start").style.display = "none";
            // AudioContextを再開（ユーザー操作が必要）
            mm.Player.tone.context.resume();
            // モデルの初期化完了後、サンプル生成と再生を無限ループで行う
            model.initialize().then(function sampleAndPlay() {
                model.sample(1).then(function (samples) {
                    player.start(samples[0]).then(function () {
                        sampleAndPlay();
                    });
                });
            });
        }
    </script>
</head>
<body>
    <button id="start" onclick="start()">Start</button>
</body>
</html>

このHTMLファイルは「Start」ボタンのあるシンプルなウェブページを作成します。クリックすると、Magenta.jsからMusicVAEモデルを初期化し、音楽シーケンスを生成して再生します。このプロセスは継続的に繰り返され、常に新しい音楽が生成されます。

仕組み

  1. Magenta.jsの読み込み: スクリプトタグでCDNからMagenta.jsライブラリを読み込みます。
  2. モデルの作成: 学習済みチェックポイントを使ってMusicVAEモデルインスタンスを作成します。
  3. ユーザー操作: ユーザーが「Start」ボタンをクリックして開始します。
  4. モデルの初期化: モデルが初期化されます（重みの読み込みなど）。
  5. サンプル生成: モデルがサンプル音楽シーケンスを生成します。
  6. 再生: プレイヤーが生成されたシーケンスを再生します。
  7. 継続的な生成: 再生後、新しいシーケンスを生成して再生します。

重要なポイント：

MusicVAEは音楽のための変分オートエンコーダーで、トレーニング中に学習したパターンに基づいて新しい音楽シーケンスを生成できます。今回使用しているモデル（trio_4bar_lokl_small_q1）は、ドラム、ベース、メロディを含むトリオスタイルの音楽を生成します。

トラブルシューティングと音質向上

Web Audio APIを使用する際には、様々な問題が発生することがあります。以下によくある問題と解決策を紹介します：

よくあるエラーと解決策

  • 音が出ない：
    • AudioContextが正しく初期化されているか確認する。
    • ブラウザがWeb Audio APIをサポートしているか確認する。
    • oscillator.start()が呼び出されているか確認する。
    • audioContext.resume()を呼び出す（特にiOSデバイスで）。
  • 音が歪む：
    • ゲインが高すぎる可能性がある。ゲイン値を下げる。
    • クリッピングが発生している可能性がある。コンプレッサーノードを使用する。
  • 音が途切れる：
    • 音の長さが短すぎる可能性がある。長さを増やす。
    • ガベージコレクションが頻繁に発生している可能性がある。オブジェクトの再利用を検討する。

音質向上のためのヒント

  • アンチエイリアシング： エイリアシングノイズを減らすためにローパスフィルターを使用する。
  • ダイナミックレンジの調整： ダイナミックレンジを調整するためにコンプレッサーやリミッターを使用する。
  • 滑らかな遷移： より滑らかな音量変化のために、setValueAtTime()の代わりにexponentialRampToValueAtTime()を使用する。

高度なトラブルシューティング：

音が出ない原因が特定できない場合は、Chrome DevToolsのPerformanceタブを使用してAudioContextの処理を分析します。CPU使用率が高いノードを見つけて最適化します。AudioContextの状態が「suspended」の場合、ブラウザの自動再生ポリシーにより、ユーザー操作が必要な場合があります。

まとめ

おめでとうございます！Web Audio APIを使った音楽生成アプリケーションを構築し、さらにMagenta.jsを使ったAIベースの音楽生成も探求しました。あなたは以下のことを学びました：

  1. Web Audio API環境のセットアップ
  2. オシレーターとゲインノードを使ったランダム音楽の生成
  3. 音楽パラメータ調整のための直感的なUIの作成
  4. AIパワードの音楽生成のためのMagenta.jsの統合

これはブラウザでのオーディオプログラミングの可能性のほんの始まりにすぎません。さらに探求を続けると、リバーブ、ディレイ、ディストーションなどのエフェクトを追加したり、異なるシンセシス技術を試したり、より複雑な音楽構造を作成したりすることができます。

最も重要なのは、楽しんで実験することです！Web Audio APIは、シンプルなサウンドエフェクトから複雑な音楽作品まで、創造的な可能性の世界を開きます。ハッピーコーディング＆音楽制作！

1
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
Sign upLogin
1
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?