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