如何基于JavaScript的Audio类实例创建AudioContext？

问题描述 #

我目前通过Audio对象播放base64格式的音频，想要创建AudioContext，但据我所知该操作似乎仅能通过<audio>标签实现？
现有代码如下：

var audio = new Audio("data:audio/mp3;base64," + buffer);

请问是否存在可行方法，能够基于已创建的这个Audio对象生成AudioContext？

解答 #

“创建AudioContext只能通过audio标签实现”是误解：new Audio()生成的实例和页面中<audio>标签生成的DOM节点同属HTMLAudioElement类型，完全可以直接接入AudioContext，不需要额外操作DOM，具体实现有两种常见方案：

• 方案一：将现有Audio实例接入AudioContext
  先初始化AudioContext实例，再通过createMediaElementSource方法把你已有的Audio对象作为音源接入即可，示例代码：

  // 兼容带webkit前缀的旧版本浏览器
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  // 你已经创建好的Audio实例
  const audio = new Audio("data:audio/mp3;base64," + buffer);
  // 将Audio实例注册为AudioContext的音源节点
  const sourceNode = audioCtx.createMediaElementSource(audio);
  // 将音源连接到音频输出设备，中间可以串联均衡器、分析器等效果节点
  sourceNode.connect(audioCtx.destination);
  
  // 后续正常调用audio.play()/pause()等原有控制方法即可，音频流会经过AudioContext处理后输出
  // 注意：首次触发播放需要绑定在点击、触摸等用户交互事件回调中，否则会被浏览器自动播放策略拦截
  

  注意：单个Audio实例只能被接入一个MediaElementSource节点，重复调用该方法接入同一个Audio实例会抛出错误。

• 方案二：直接通过AudioContext解码base64音频播放，不依赖Audio对象
  如果你不需要保留原有Audio对象的播放控制逻辑，可以直接把base64音频数据转为ArrayBuffer交给AudioContext解码播放，全程不需要依托Audio对象或DOM标签：

  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  // 去掉base64数据头，转成二进制ArrayBuffer
  const rawBase64 = buffer; // 存储的无data头的base64音频内容
  const binaryStr = atob(rawBase64);
  const bufferLen = binaryStr.length;
  const audioBuffer = new ArrayBuffer(bufferLen);
  const uint8View = new Uint8Array(audioBuffer);
  for (let i = 0; i < bufferLen; i++) {
    uint8View[i] = binaryStr.charCodeAt(i);
  }
  // 解码并播放
  audioCtx.decodeAudioData(audioBuffer, (decodedAudioData) => {
    const bufferSource = audioCtx.createBufferSource();
    bufferSource.buffer = decodedAudioData;
    bufferSource.connect(audioCtx.destination);
    // 参数0表示立即播放
    bufferSource.start(0);
  });
  

提示：AudioContext初始为暂停状态，首次激活必须由用户主动交互事件触发，这是所有现代浏览器的通用安全限制，没有绕过方法。

内容的提问来源于stack exchange，提问作者Arty