@muguilin/web-audio-track

v1.0.4

Published

2 months ago

音轨、声道、audio peak、媒体音轨、audio meter、视音频媒体声道、video|audio 音频声道提取, js获取视音频声道 js获取音频流 js获取左右声道 js获取视音频轨道 Web前端 Js音频可视化 js音频处理 JS视频声道

Downloads

0High
0Medium
0Low

muguilin

音轨音频可视化声道音频流音轨声道左右声道 web audio 媒体音轨 audio peak 视音频媒体声道 audio meter 视音频媒体通道 video、audio音频声道声道数据提取

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>

Published

Vulnerabilities

Links

Maintainers

Keywords