web audio 之多轨语音播放

web audio 之多轨语音播放web audio可以实现的功能实例分享流程分析流程图流程总结注意事项最近学习了下 web audio 觉得很有意思，这里和大家分享下web audio可以实现的功能web audio 可以对语音文件的音轨进行分割，区分出左右声道，从而单独播放两个音轨的语音实例分享这里将web audio和audio标签进行结合使用，从 audio标签中获取 mediaSou

weixin_47276928

1434人浏览 · 2020-08-26 15:26:04

weixin_47276928 · 2020-08-26 15:26:04 发布

web audio 之多轨语音播放

web audio可以实现的功能
实例分享
流程分析
- 流程图
- 流程总结
注意事项

最近学习了下 web audio 觉得很有意思，这里和大家分享下

web audio可以实现的功能

web audio 可以对语音文件的音轨进行分割，区分出左右声道，从而单独播放两个音轨的语音

实例分享

这里将web audio和audio标签进行结合使用，从 audio标签中获取 mediaSource,进行声音的处理。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Audio</title>
  </head>
  <body>
    <audio
      controls
      id="audio"
      crossorigin="anonymous"	//audio标签 添加 该属性 允许跨域
      src=""
    ></audio>

    L<input type="range" min="0" max="200" value="100" id="equalizer" />R
    <script>
      var AudioContext =
          AudioContext ||
          webkitAudioContext, // 兼容性
        context = new AudioContext(), // 创建Audio上下文
        audio = document.getElementById("audio");
      var media = context.createMediaElementSource(audio), // 从元素获取音源
        lGain = context.createGain(), // 左声道
        rGain = context.createGain(), // 右声道
        splitter = context.createChannelSplitter(2), // 创建分离器:这里最多可以有6个通道
        merger = context.createChannelMerger(2), // 创建 合成器
        vol = 100, // 音量
        lVol = 100, // 左声道
        rVol = 100; // 右声道
      lGain.gain.value = 1;
      rGain.gain.value = 1;
      media.crossOrigin = "anonymous";	//这里解决跨域问题
	  //下面将 音源 与 各个节点 连接起来（下面的流程分析图）
      media.connect(splitter);	//音源连接到 分离器
      splitter.connect(lGain, 0);	//将分离器的 第0个通道给左声道
      splitter.connect(rGain, 1);	//将分离器的 第1个通道给右声道
      lGain.connect(merger, 0, 0);	//将左声道的第0个通道 给 合成器的第0个通道
      rGain.connect(merger, 0, 1);	//将右声道的第0个通道 给 合成器的第1个通道
      merger.connect(context.destination);//这里连接到 输出设备

      // 声道控制
      onloadequ = equalizer.onchange = function() {
        lVol = equalizer.value > 100 ? 100 : equalizer.value;
        rVol = equalizer.value < 100 ? 100 : 200 - equalizer.value;
        setVolume();
      };
      // 设置音量
      function setVolume() {
        lGain.gain.value = ((lVol / 100) * vol) / 100;
        rGain.gain.value = ((rVol / 100) * vol) / 100;
        context.resume();
      }
      audio.addEventListener("play", function() {
        //开始播放时触发
        context.resume();	//这里将 context 进行复位操作，否则不能进行播放
      });
    </script>
  </body>
</html>

流程分析

流程图

参考文档

流程总结

上面就是web audio 的普遍使用步骤

创建创建音频上下文 context
获取音源：media ，这里是通过 createMediaElementSource 方法从 audio标签中获取
创建各个节点，如：lGain （左声道）、rGain （右声道）、splitter （分离器）、merger （合成器）、
将各节点 connect
播放语音 audio.paly()

注意事项

audio 标签中的语音需要从服务器获取，切该接口必须支持跨域（Access-Control-Allow-Origin: * ）
chrome 浏览器不支持语音的自动播放，需要通过按钮触发播放
audio 标签和 web audio 一起使用的时候，点击标签的播放按钮会报错，需要添加 context.resume() 方法，将context 复位

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI智能体—人工智能工作流与人工智能智能体：真正的区别是什么？

本文探讨了人工智能工作流与智能体的核心区别。工作流是静态、可预测的执行序列（如预处理→嵌入→搜索→总结），适合批处理作业；而智能体能动态感知环境、自主决策（感知→推理→决策循环），具备适应性和工具选择能力。关键差异在于：工作流遵循固定路径，智能体则能根据目标调整策略。架构上，工作流使用Airflow等工具，智能体依赖LangChain等框架。智能体的自主性使其更适用于动态环境，代表下一代AI应用方