npm package: @muguilin/web-audio-track
Description: 音轨、声道、audio peak、媒体音轨、audio meter、视音频媒体声道、video|audio 音频声道提取,  js获取视音频声道 js获取音频流 js获取左右声道 js获取视音频轨道 Web前端 Js音频可视化 js音频处理 JS视频声道
Author: 沐枫（MuGuiLin）
Latest version: 1.0.4

# Web Audio Track - 网络音轨

[![MIT License](https://img.shields.io/npm/l/utilsjs.svg?style=flat-square)](https://www.npmjs.com/package/mu-tooljs)

> Web前端，Js实时获取视音频多媒体声道、音轨、波形，（获取video、audio视音频 音轨数据 [ js获取视音频声道 js获取音频流 js获取左右声道 js获取视音频轨道 Web前端 Js音频可视化 js音频处理 JS视频声道]）在视音频播放时，实时提取对应声道的数据流，渲染生成音频声道峰值电平跳表 。

#### 峰值电平：

![Peak Level](https://i-blog.csdnimg.cn/direct/29b832b9f833478d9baf51b71b68bd5e.png#pic_center)

---

#### 下载安装：

```shell
# 使用npm命令下载安装
$ npm i @muguilin/web-audio-track

# 使用yarn命令下载安装
$ yarn add @muguilin/web-audio-track

```

#### 使用方法：

- 通过 JS Module(模块)方式导入使用

  ```html
  <!-- 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 的形式引入使用

  ```html
  <!-- 将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>
  ```

#### 使用实例：

#### [🚀 完整实例代码使用方法，可以点击前往了解更多！！](https://blog.csdn.net/muguli2008/article/details/134762971)

```html
<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>
```