Web Audio Track - 网络音轨

Web前端，Js实时获取视音频多媒体声道、音轨、波形，（获取video、audio视音频音轨数据 [ js获取视音频声道 js获取音频流 js获取左右声道 js获取视音频轨道 Web前端 Js音频可视化 js音频处理 JS视频声道]）在视音频播放时，实时提取对应声道的数据流，渲染生成音频声道峰值电平跳表。

峰值电平：

Peak Level

下载安装：

# 使用npm命令下载安装
$ npm i @muguilin/web-audio-track

# 使用yarn命令下载安装
$ yarn add @muguilin/web-audio-track

使用方法：

通过 JS Module(模块)方式导入使用

<!-- ES6模块导入使用 -->
<script type="module">
  // const WebAudioTrack require('@muguilin/web-audio-track');

  import WebAudioTrack from '@muguilin/web-audio-track';

// WebAudioTrack实例化
  const track = new WebAudioTrack(video, {
      ...
}
</script>

通过 <script src=""> 标签以 CDN 的形式引入使用

<!-- 将web-audio-track.js下载后，在html文件中引入本地脚本 -->
<script src="./js/web-audio-track.js"></script>
<script>
  // 在浏览器控制台中打印WebAudioTrack类是否引入成功
  console.log(WebAudioTrack);

  // WebAudioTrack实例化
  const track = new WebAudioTrack(video, {
      ...
  }
</script>

使用实例：

🚀 完整实例代码使用方法，可以点击前往了解更多！！

<html lang="en">

<head>
    <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script async src="//hm.baidu.com/hm.js?95b4630201fde57f28ecceee931c0348"></script>
    <title>获取视音频媒体音频声道</title>
    <style>
        body { padding: 50px; }
        section { margin: 50px auto; padding: 50px; width: 1200px; }
        audio, video { width: 500px; }
        meter { width: 200px; transform: rotate(-90deg); }
        button { font-size: 16px; }
    </style>
</head>

<body>
    <section>
          <button type="button" id="FLBTN">左声道（L）</button>
        <!-- <input type="range" id="VL" min="0" max="1" step="0.01" class="VL" value="1" /> -->
          <meter id="FL" min="-60" low="-30" high="-6" max="3" value="-60"></meter>

          <!-- <audio loop controls src="./xxx.mp3"></audio> -->
        <video loop controls src="./xxx.mp4"></video>

        <meter id="FR" min="-60" low="-30" high="-6" max="3" value="-60"></meter>
        <button type="button" id="FRBTN">右声道（R）</button>
        <!-- <input type="range" id="VR" min="0" max="1" step="0.01" class="VR" value="1" /> -->
    </section>

    <script type="module">
        import WebAudioTrack from '@muguilin/web-audio-track';

        // const audio = document.querySelector("audio");
        const video = document.querySelector("video");

        video.addEventListener("play", () => {

            // 将获取到的video实例对象 并传到 WebAudioTrack类中
            const track = new WebAudioTrack(video, {

                //  实时提取音频样本相关数据
                onAnimation: ({ clip, level, peak }) => {

                    // console.log('当前音频声道（音轨）总数：', level.length);
                    // console.log('当前音频各声道-峰值电平数值：', level);
                    // console.log('当前音频各声道-峰值电平百分比：', clip);
                    // console.log('当前音频各声道-峰值电平平均响度：', peak);

                    const [fl, fr, sl, sr] = level;

                    // 左声道
                    if(fl) (FL.value = fl);

                    // 右声道
                    if(fr) (FR.value = fr);

                    // 左环绕
                    // if(sl) (SL.value = sl);

                    // 右环绕
                    // if(sr) (SR.value = sr);
                }
            });

            // console.log(track);

               // 静音左FL声道
            FLBTN.onclick = function () {
                track.gas[0].gain.value = Number(!track.gas[0].gain.value);
            };

            // 左FL声道音量控制
            // VL.oninput = function () {
            //     track.gas[0].gain.setValueAtTime(this.value, track.ac.currentTime);
            // };

            // 静音右FR声道
            FRBTN.onclick = function () {
                track.gas[1].gain.value = Number(!track.gas[1].gain.value);
            };

            // 右FR声道音量控制
            // VR.oninput = function () {
            //     track.gas[1].gain.setValueAtTime(this.value, track.ac.currentTime);
            // };
        });
    </script>
</body>
</html>

Package detail

@muguilin/web-audio-track

readme

Web Audio Track - 网络音轨

峰值电平：

下载安装：

使用方法：

使用实例：

🚀 完整实例代码使用方法，可以点击前往了解更多！！