基于wavesurfer.js实现音频可视化案例（有源码链接）

wavesurfer.js是什么？

Wavesurfer.js是一款用于在Web浏览器中实时可视化音频波形的JavaScript库。它提供了一组功能丰富的API和可定制的选项，使你可以轻松地集成音频可视化功能到你的Web应用程序中。

以下是对Wavesurfer.js库的主要特点和功能的总结：

1. 实时音频可视化：Wavesurfer.js允许您将音频文件加载到浏览器中，并实时生成精美的波形可视化效果。你可以选择不同的波形样式、颜色和尺寸，以及定制化的交互效果。
2. 支持多种音频文件格式：Wavesurfer.js支持多种常见的音频文件格式，包括MP3、WAV、AAC和Ogg等。你可以通过调用相应的加载方法来加载任何支持的音频文件。
3. 功能丰富的API：该库提供了一组功能丰富的API，使你可以进行各种操作，如播放、暂停、跳转、缩放、选择和剪切等。你可以根据需要编写自定义代码来控制音频的行为和交互。
4. 可定制的外观和样式：Wavesurfer.js提供了丰富的样式选项，可以自定义波形的外观和样式。你可以调整颜色、阴影效果、进度条和标记等，以创建适合你应用程序风格的音频可视化效果。
5. 响应式设计：Wavesurfer.js能够自动适应不同大小的容器和屏幕，以确保音频可视化效果在不同设备和分辨率下都能良好地显示和响应。

总的来说，Wavesurfer.js是一个功能强大且易于使用的音频可视化库，适用于各种Web应用程序和项目。无论是构建音乐播放器、音频编辑工具还是声音可视化应用程序，Wavesurfer.js提供了丰富的功能和灵活的定制选项，可以帮助你实现精美、交互和富有表现力的音频波形可视化效果。

至于如何学习wavesurfer.js，这里就不再讲述，大伙可以去看看别的优质文章

先看看dome效果

本案例使用vite构建项目，vue3，element-plus的上传组件、按钮组件。

• 界面

• 选择音频

• 效果

讲讲要注意的代码点

1. 先看template

<template>
  <div class="item">
    <h3>音频波形显示demo</h3>
    <section class="upload_box" id="upload3">
      <div class="upload_button_box">
        <!-- accept限制只能选择音频 -->
        <el-upload
          ref="upload"
          class="upload-demo"
          :limit="1"   // 限制一个文件
          :on-exceed="handleExceed"  // 当超出限制时，执行的钩子函数
          :auto-upload="false" // 是否自动上传文件
          accept="audio/*"
          :on-change="showAudio"  // 变化时触发
          :on-remove="remove" // 移除时触发
        >
          <template #trigger>
            <el-button type="primary">选择音频文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip text-red">
              限制1个音频，新文件将覆盖旧文件
            </div>
          </template>
        </el-upload>
      </div>
      <div class="upload_abbre">
        <audio
          :src="BlobUrl" //---->传入BlobUrl显示
          v-show="isShow"
          controls
          @play="play"
          @pause="pause"
          @timeupdate="timeupdate"
        ></audio>
      </div>
    </section>
  </div>

  <!-- 这里是WaveSurfer实例，最终也是被编译为canvas -->
  <div id="waveform" ref="waveform" v-show="isWaveform"></div>

</template>

1. 这里重点讲一下showAudio方法(伪代码)

const showAudio = async (files) => {
  // 将文件对象中的原始数据赋给变量 “file”，以便在代码后续的处理过程中使用原始数据。
  let file = files.raw;
  // 转base64字符串
  let BASE64 = await changeBASE64(file);
  //转blob对象
  let auidoBlob = dataURLtoBlob(BASE64);
  //创建blob url
  let blobUrl = window.URL.createObjectURL(auidoBlob);
  ...
  // console.log("BlobUrl", BlobUrl.value);---->  BlobUrl blob:http://127.0.0.1:5173/4a88a045-10a2-4f9e-a3e5-dd22122de130
};

下面两个方法可以直接拿来用，建议保存。

// 把选择的文件读取成为BASE64
const changeBASE64 = (file) => {
  return new Promise((resolve) => {
    let fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
};

//base64转blob对象，创建blob url
const dataURLtoBlob = (dataurl) => {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: mime,
  });
};

这段代码的目的是接收一个文件对象，从中提取原始数据，并将其转换为 Blob 对象和 Blob URL(该格式的数据可以作为audio的src属性，之后可作为独立的窗口打开，像base64一样)，以便在浏览器中显示和播放音频文件。其余部分可能用于控制文件显示和波形显示的状态。

在地址栏输入上面打印的结果blob:http://127.0.0.1:5173/4a88a045-10a2-4f9e-a3e5-dd22122de130

1. wavesufer.js实例，可根据自己的需求添加或修改属性

onMounted(() => {
  wavesurfer.value = WaveSurfer.create({
    container: waveform.value,
    waveColor: "#00FF00",
    //波纹宽度
    // barWidth: 1,
    //光标的填充颜色，指示播放头的位置
    cursorColor: "#fff",
    //光标后面的波形部分的填充色.
    progressColor: "#7CFC00",
    backend: "MediaElement",
    // mediaControls: false,
    // 音频播放速度，数值越小越慢
    audioRate: "1",
  });
});

1. 另外一个注意点

<audio
  :src="BlobUrl"
  v-show="isShow"
  controls
  @play="play"
  @pause="pause"
  @timeupdate="timeupdate" // 可能小伙伴对这个@timeupdate不熟
></audio>

timeupdate是audio的一个方法，当音频的播放位置发生变化时，即播放时间更新时，将触发 timeupdate 事件，timeupdate 事件提供了 event.target.currentTime属性，可用于获取当前播放时间。

我这里要做的功能是实现了音频时间和波形时间的同步进行，当拖动音频进度，波形进度也会变化，以音频进度为准。

const timeupdate=async (e)=>{
  Audiotime=e.target.currentTime;  //获取音频当前的时间
  titleTime= e.target.duration;     //获取音频总时间的时间,单位为秒
  let progress=Audiotime/titleTime
  if(isNaN(progress)){
    progress=0
  }
  //波形根据音频时间跳转0-1之间
  wavesurfer.value.seekTo(progress)
}

好了，这只是个dome，大伙可根据这个完成更牛bi的效果

dome源码链接https://github.com/uuuuuber/Audio-visualization