Vue.jsでのオーディオ処理：Web Audio APIを使って、音声の生成や解析

作成日 2025.01.08
Vue.js
Vue.js

Vue.jsとWeb Audio APIを組み合わせることで、音声の生成、解析、視覚化など高度なオーディオ処理を実現できる。この記事では、Vue.jsを活用したオーディオ処理の手法や実装例について解説する。

1. 1. プロジェクト環境のセットアップ
2. 2. Web Audio APIの基本セットアップ
3. 3. 音声の生成
4. 4. Vueコンポーネントで音声を制御
5. 5. 音声ファイルの再生
6. 6. 音量の調整
7. 7. オーディオビジュアライゼーション
8. 8. Vueでビジュアライゼーションを描画
9. 9. マイク入力の処理
10. 10. エフェクトの適用
11. 11. Vuexでオーディオ状態管理
12. 12. アプリケーションのデプロイ

1. プロジェクト環境のセットアップ

新しいVue.jsプロジェクトを作成し、必要な依存関係を追加する。

npm install -g @vue/cli
vue create audio-app
cd audio-app

2. Web Audio APIの基本セットアップ

オーディオコンテキストを初期化し、基本的な音声処理環境を構築する。

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

3. 音声の生成

Web Audio APIを使用してシンプルな音声を生成する。

const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();

4. Vueコンポーネントで音声を制御

Vueコンポーネントを作成し、ボタンで音声の再生・停止を制御する。

<template>
  <div>
    <button @click="startSound">再生</button>
    <button @click="stopSound">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oscillator: null,
    };
  },
  methods: {
    startSound() {
      this.oscillator = audioContext.createOscillator();
      this.oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
      this.oscillator.connect(audioContext.destination);
      this.oscillator.start();
    },
    stopSound() {
      if (this.oscillator) {
        this.oscillator.stop();
      }
    },
  },
};
</script>

5. 音声ファイルの再生

外部オーディオファイルを読み込み、再生する。

fetch('audio-file.mp3')
  .then(response => response.arrayBuffer())
  .then(data => audioContext.decodeAudioData(data))
  .then(buffer => {
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
  });

6. 音量の調整

GainNodeを使用して音量を調整する。

const gainNode = audioContext.createGain();
gainNode.gain.value = 0.5;

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

7. オーディオビジュアライゼーション

AnalyserNodeを使用して音声波形を視覚化する。

const analyser = audioContext.createAnalyser();
oscillator.connect(analyser);
analyser.connect(audioContext.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(dataArray);

8. Vueでビジュアライゼーションを描画

Canvasを使ってリアルタイムの音声データを描画する。

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const dataArray = new Uint8Array(analyser.frequencyBinCount);

      function renderFrame() {
        requestAnimationFrame(renderFrame);
        analyser.getByteTimeDomainData(dataArray);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        for (let i = 0; i < dataArray.length; i++) {
          const y = (dataArray[i] / 255.0) * canvas.height;
          ctx.lineTo(i, y);
        }
        ctx.stroke();
      }
      renderFrame();
    },
  },
};
</script>

9. マイク入力の処理

ユーザーのマイク入力を取得して処理する。

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(audioContext.destination);
  });

10. エフェクトの適用

DelayNodeを使用して音声にエフェクトを適用する。

const delay = audioContext.createDelay();
delay.delayTime.value = 0.5;

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

11. Vuexでオーディオ状態管理

Vuexを使って音声の状態を管理する。

export default new Vuex.Store({
  state: {
    isPlaying: false,
  },
  mutations: {
    SET_PLAYING(state, status) {
      state.isPlaying = status;
    },
  },
  actions: {
    togglePlay({ commit }, status) {
      commit('SET_PLAYING', status);
    },
  },
});