Web Audio API

_clai發表於2024-05-01
WebAPI

Web Audio API: 控制Web上的音訊提供了一個功能強大的通用系統，允許開發人員選擇音訊源，為音訊新增效果，建立音訊視覺化，應用空間效果（如平移）等等

  • (oscillator)振盪器播放聲音
<button type="button" class="btn-play">play</button>

<script>
  // Web Audio API

  // 建立一個 AudioContext 物件
  const context = new AudioContext();
  console.log('context => ', context);

  // 建立一個(oscillator)振盪器節點
  const oscillator = context.createOscillator();
  console.log('oscillator => ', oscillator);

  // 連線(oscillator)振盪器節點到輸出節點
  oscillator.connect(context.destination);

  // 設定(oscillator)振盪器型別為 sine
  oscillator.type = 'sine';
  // 設定(oscillator)振盪器頻率為 880Hz
  oscillator.frequency.setValueAtTime(880, context.currentTime);

  const playBtn = document.querySelector('.btn-play');
  let paused = false;
  playBtn.addEventListener('click', () => {
    // 開始播放(oscillator)振盪器
    oscillator.start();
  });
</script>
  • 播放音訊

點選按鈕，音訊檔案將被獲取、解碼和播放

<button type="button" class="btn-play">play</button>

<script>
  // Web Audio API

  // 建立一個 AudioContext 物件
  const context = new AudioContext();
  console.log('context => ', context);

  const playBtn = document.querySelector('.btn-play');
  playBtn.addEventListener('click', async () => {
    // 載入音訊檔案
    const buf = await fetch('./tts.mp3').then((res) => res.arrayBuffer());

    // 將音訊檔案解碼為 AudioBuffer 物件
    context.decodeAudioData(buf, (decodeData) => {
      // 建立一個 BufferSourceNode 物件
      const source = context.createBufferSource();
      // 將 AudioBuffer 物件賦值給 BufferSourceNode 物件
      source.connect(context.destination);
      source.buffer = decodeData;
      // 開始播放
      source.start();
    });
  });
</script>

相關文章