Web Audio API

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>