vue+elementUI使用Wavesurfer.js音频可视化-优快云博客

该文章介绍了如何在Vue项目中集成Wavesurfer.js库，结合elementUI创建一个音频播放器，包括播放/暂停、时间轴、倍速控制和音量调节等功能。同时，文章提到了datav的数据视图组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+elementUI使用Wavesurfer.js音频可视化

效果图
在这里插入图片描述
安装 wavesurfer.js

 npm install wavesurfer.js --save

（datav安装）

 npm install @jiaminghi/data-view

在使用界面引用

import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件

在使用界面引用

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

HTML

<template>
  <div id="aiccAudio">
    <el-card>
      <div id="wavefrom" ref="wavefrom" @click="getTime">
      </div>
    </el-card>
    <div class="audio-controlBar">
      <!-- 播放/暂停按钮 -->
      <button @click="playMusic">
        <i v-if="videoPlay" class="el-icon-video-play"></i>
        <i v-else class="el-icon-video-pause"></i>
      </button>
      <!-- 时间  -->
      <div class="audio-time">
        <div class="audio-current-time" aria-label="time">{
  
  {currentTime}}</div>
        <span class="audio-fen-line">|</span>
        <div class="audio-duration" aria-label="duration">{
  
  {duration}}</div>
      </div>
      <!-- 倍速  -->
      <el-select class="audio-speed" v-model="speedValue" @change="speedChange" style="width: 60px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span class="audio-line">|</span>
      <!--  音量  -->