web audio 之多轨语音播放

最新推荐文章于 2024-03-22 15:52:27 发布

weixin_47276928

最新推荐文章于 2024-03-22 15:52:27 发布

阅读量985

点赞数

分类专栏： try 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_47276928/article/details/108239361

版权

try 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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 复位

weixin_47276928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
web audio 之多轨语音播放

web audio 之多轨语音播放web audio可以实现的功能实例分享流程分析流程图流程总结注意事项最近学习了下 web audio 觉得很有意思，这里和大家分享下web audio可以实现的功能web audio 可以对语音文件的音轨进行分割，区分出左右声道，从而单独播放两个音轨的语音实例分享这里将web audio和audio标签进行结合使用，从 audio标签中获取 mediaSource,进行声音的处理。<!DOCTYPE html><html lang="e
复制链接

扫一扫