vudio.js 使用及实现音频数据可视化

0背景

掘金上看到文章很有意思，借助 vudio.js 来实现，查看了下 vudio.js 插件，此插件的 npm 地址，但是打开 demo 无法查看效果。遂自己引入，写了一个 demo，将使用方式记录下。我用的是 vue3 + vite + ts，搭建项目请自行查找。

1如何使用

npm i vudio.js --save

import Vudio from 'vudio.js'

此时报需要 declare module 'vudio.js'，再根目录下创建 xxx.d.ts 并申明：

declare module 'vudio.js'

具体代码如下：

<template>
  <div>
    <canvas width="256px" height="100px" id="canvas" ref="canvasObj"></canvas>
    <audio src="../assets/mp3/dujiajiyi.mp3" id="audio" controls autoplay />
    <button @click="play">播放</button>
  </div>
</template>
<script setup lang="ts">
import Vudio from 'vudio.js'

const play = () => {
  var audioObj = document.querySelector('#audio');
  var canvasObj = document.querySelector('#canvas');
  (audioObj as any).play();
  var vudio = new Vudio(audioObj, canvasObj, {
    effect: 'waveform', // 当前只有'waveform'这一个效果，哈哈哈
    accuracy: 128, // 精度,实际表现为波形柱的个数，范围16-16348，必须为2的N次方
    width: 256, // canvas宽度，会覆盖canvas标签中定义的宽度
    height: 100, // canvas高度，会覆盖canvas标签中定义的高度
    waveform: {
      maxHeight: 80, // 最大波形高度
      minHeight: 1, // 最小波形高度
      spacing: 1, // 波形间隔
      color: '#f00', // 波形颜色，可以传入数组以生成渐变色
      shadowBlur: 0, // 阴影模糊半径
      shadowColor: '#f00', // 阴影颜色
      fadeSide: true, // 渐隐两端
      horizontalAlign: 'center', // 水平对齐方式，left/center/right
      verticalAlign: 'middle' // 垂直对齐方式 top/middle/bottom
    }
  });

  // 调用dance方法开始得瑟吧
  vudio.dance();

}
</script>

2效果

3注意

1. MP3 文件可以自行查找，如网易云就可以下载。
2. 在 button 中触发播放，则是浏览器限制，需要手动触发，否则无法自动播放音频（当然也可试试静音能否自动播放）。
3. 可更改可视化的颜色。

4中途切换样式

中途换个姿势得瑟也是可以的：

// 中途换个姿势得瑟也是可以的
vudio.setOption({
  waveform: {
    color: '#06f',
    verticalAlign: 'bottom'
  }
});