【双声道及语谱图wavesurfer.js实现、spectrogram语谱图颜色设置】

皓月Code

于 2024-10-14 14:30:59 发布

阅读量760

点赞数 6

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_56048772/article/details/142917548

版权

一、前言

上一期借助wavesurfer.js库实现音频文件标注等相关功能，这期分享借助wavesurfer的 spectrogram插件实现双声道！

二、实现

在这里插入图片描述
1. option配置属性

splitChannels	`false`	Boolean	是否使用分裂声道模式。如果设置为 `true`，则播放器将显示双声道音频的两个声道，每个声道有自己的音量控制。

2. wavesurfer插件语谱图spectrogram

import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'

Spectrogram.create({  
          labels: true,  
          height: 120,  
          splitChannels: true, //是否分割轨道 
          colorMap: colormap({  
            colormap: "summer",  
            nshades: 256,  
            format: "float",  
          }),  
        }),

三、wavesurfer.js相关源码分析

1. 获取通道数

手动获取单双通道

在这里插入图片描述

wavesurfer.on("decode", () => {  
         /**获取通道数 */  
        wavesurfer.decodedData.numberOfChannels
         }),

当然wavesurfer可以自动识别单双声道，只要设置splitChannels属性为true即可！

2. 语谱图Spectrogram插件颜色设置

Spectrogram

初始是黑白颜色的！用colorMap属性设置颜色！
在这里插入图片描述

colorMap需要一个包含256个四元组的数组，每个四元组代表一种颜色的RGBA值。
npm i colormap
我们安装的 colormap 他有很多主题比如：‘summer’、‘hot’

import colormap from "colormap";

colorMap: colormap({  
            colormap: "summer", //colorMap主题颜色
            nshades: 256,  
            format: "float",  
          }),

3. 左右声道数据

在这里插入图片描述

console.log(wavesurfer.decodedData.getChannelData(0));  //左声道数据
console.log(wavesurfer.decodedData.getChannelData(1));  //右声道数据