在vue3中使用音频可视化插件wavesurfer.js

在Vue2中使用可查看：在Vue中使用音频可视化插件wavesurfer.js

链接自取

• 官网
• TypeScript API
• Examples
• v6版本有显著变化(移除了一些 options 和 methods)

一、wavesurfer 基本用法

1.下载 wavesurfer.js

$ pnpm install wavesurfer.js --save

2.导入

<script setup lang="ts">
import WaveSurfer from 'wavesurfer.js'
</script>

3.创建一个容器

<template>
  <div>
    <div id="waveform"></div>
    <el-button type="primary" @click="playPause">Play/Pause</el-button>
  </div>
</template>

4.创建一个实例

<script setup lang="ts">
import { onMounted } from 'vue'
import WaveSurfer from 'wavesurfer.js'

let wavesurfer: WaveSurfer | null = null
function initWaveSurfer() {
    wavesurfer = WaveSurfer.create({
        container: '#waveform', // 绑定容器
        url: '/music.mp3',  // 音频地址，使用的是 vite，将文件放到根目录 public 下才有用!!!
        autoCenter: false, // 自动播放
        waveColor: '#4F4A85',
        progressColor: '#383351',
    })
}

// 播放暂停方法
const playPause = () => {
  wavesurfer?.playPause()
}
onMounted(() => {
  initWaveSurfer()
})
</script>

二、wavesurfer 方法

1.播放暂停

// play(): Promise<void>
wavesurfer?.play()
// pause(): void
wavesurfer?.pause()
// playPause: Promise<void>
wavesurfer?.playPause()    

2.插件

// getActivePlugins(): GenericPlugin[]
wavesurfer?.getActivePlugins()
// registerPlugin<T>(plugin): T
wavesurfer?.registerPlugin(Regions.create())

3.创建实例

// create(options): default
WaveSurfer.create(options: WaveSurferOptions) 

• WaveSurferOptions
• Options Examples

4.停止并回到开始

// stop(): void
wavesurfer?.stop()

5.缩放

// zoom(minPxPerSec): void
wavesurfer?.zoom(minPxPerSec:number)

Zoom Examples

6.速度

// getPlaybackRate(): number
wavesurfer?.getPlaybackRate()
// setPlaybackRate(rate, preservePitch?): void
wavesurfer?.setPlaybackRate(rate: number, preservePitch: boolean)

Speed Examples

7.音量

// getVolume(): number
wavesurfer?.getVolume()
// setVolume(volume): void
wavesurfer?.setVolume(volume: number)

8.All

更多方法查看WaveSurfer Methods

三、wavesurfer 事件

// 点击时播放
wavesurfer.on('click', () => {
  wavesurfer.play()
})
// 音频加载完后播放
wavesurfer.on('ready', () => {
  wavesurfer.play()
})

• 更多事件查看 WaveSurferEvents
• Events Examples
  

四、Timeline 插件

1.创建一个 Timeline 插件的容器

<template>
  <div>
    <div id="timeline"></div>
    <div id="waveform"></div>
    <el-button type="primary" @click="playPause">Play/Pause</el-button>
  </div>
</template>

2.导入并注册插件

导入 Timeline 插件，并在创建 wavesurfer 实例时，添加 plugins 属性：

<script setup lang="ts">
import Timeline from 'wavesurfer.js/dist/plugins/timeline.js' 
function initWaveSurfer() {
    wavesurfer = WaveSurfer.create({
        container: '#waveform', // 绑定容器
        url: '/music.mp3',  // 音频地址，使用的是 vite，将文件放到根目录 public 下才有用
        autoCenter: false, // 自动播放
        waveColor: '#4F4A85',
        progressColor: '#383351',
        plugins: [
            Timeline.create({container: '#timeline'}), // 注册插件的第一种方式,也可以使用 registerPlugin 来注册
        ]
    })
}
</script>

3.Doc & Examples

• TimeLine 插件 API 文档
• TimeLine Examples
• Timeline2 examples

五、Hover 插件（替代之前的 Cursor 插件）

1.导入并注册插件

导入 Hover 插件，并在 plugins 属性中添加 Hover 插件的相关配置：

<script setup lang="ts">
import Hover from 'wavesurfer.js/dist/plugins/hover.js'
function initWaveSurfer() {
    wavesurfer = WaveSurfer.create({
        container: '#waveform', // 绑定容器
        url: '/music.mp3',  // 音频地址，使用的是 vite，将文件放到根目录 public 下才有用
        plugins: [
            Hover.create({ 
                lineColor: '#ff0000',
                lineWidth: 2,
                labelBackground: '#555',
                labelColor: '#fff',
                labelSize: '11px',
            }),
        ]
    })
}
</script>

2.Doc

• Hover 插件 API 文档

六、Regions 插件

1.导入并注册插件

导入 Regions 插件，并在 plugins 属性中添加 Regions 插件的实例：

<script setup lang="ts">
import Regions, { RegionParams } from 'wavesurfer.js/dist/plugins/regions.js'
let wsRegions: Regions = Regions.create() // Regions 实例
let activeRegion: RegionParams | null = null // 声明当前区域

function initWaveSurfer() {
    wavesurfer = WaveSurfer.create({
        container: '#waveform', // 绑定容器
        url: '/music.mp3',  // 音频地址，使用的是 vite，将文件放到根目录 public 下才有用
        autoCenter: false, // 自动播放
        plugins: [
            wsRegions,  // ➕
        ]
    })
}
</script>

2.展示区域

新增 showWsRegion 方法，展示区域：

<script setup lang="ts">
const showWsRegion = (regions: RegionParams[]) => {
  wavesurfer?.on('ready', () => {
    regions.forEach((region) => {
      wsRegions.addRegion(region)
    })
  })
}
onMounted(() => {
  initWaveSurfer()
  const regionsData = [
    {
      start: 0,
      end: 8,
      content: 'Resize me',
      color: 'red',
      drag: false,
      resize: true,
    },
    {
      start: 49,
      end: 60,
      content: 'Cramped region',
      color: 'green',
      minLength: 1,
      drag: true,
      resize: true,
      // maxLength: 10,
    },
  ]
  showWsRegion(regionsData) // ➕
})
</script>

3.播放当前区域

新增 playActiveRegion 方法，点击区域并播放当前区域：

<script setup lang="ts">
const playActiveRegion = () => {
  wsRegions?.on('region-clicked', (region, e) => {
    e.stopPropagation()
    region.play()
    activeRegion = region
  })
 wavesurfer?.on('timeupdate', (currentTime) => {
    if (activeRegion && currentTime >= activeRegion.end!) {
      wavesurfer?.pause()
      activeRegion = null
    }
  })
}
onMounted(() => {
  initWaveSurfer()
  const regionsData = [
    {
      start: 0,
      end: 8,
      content: 'Resize me',
      color: 'red',
      drag: false,
      resize: true,
    },
    {
      start: 49,
      end: 60,
      content: 'Cramped region',
      color: 'green',
      minLength: 1,
      drag: true,
      resize: true,
      // maxLength: 10,
    },
  ]
  showWsRegion(regionsData)
  playActiveRegion() // ➕
})
</script>

4.新增区域

新增 addWsRegion 方法，新增区域并自动播放当前区域：

<script setup lang="ts">
const addWsRegion = () => {
  wsRegions.enableDragSelection({ color: 'red' })
  wsRegions.on('region-created', (region) => {
    activeRegion = region
    region.play()
  })
  wavesurfer?.on('timeupdate', (currentTime) => {
    if (activeRegion && currentTime >= activeRegion.end!) {
      wavesurfer?.pause()
      activeRegion = null
    }
  })
}
onMounted(() => {
  initWaveSurfer()
  const regionsData = [
    {
      start: 0,
      end: 8,
      content: 'Resize me',
      color: 'red',
      drag: false,
      resize: true,
    },
    {
      start: 49,
      end: 60,
      content: 'Cramped region',
      color: 'green',
      minLength: 1,
      drag: true,
      resize: true,
      // maxLength: 10,
    },
  ]
  showWsRegion(regionsData)
  playActiveRegion()
  addWsRegion() // ➕
})
</script>

5.Doc & Examples

• Regions 插件 API 文档
• Regions Examples

七、Minimap 插件

1.创建一个 Minimap 插件的容器

<template>
  <div>
    <div id="timeline"></div>
    <div id="waveform"></div>
    <div id="minimap"></div>
    <el-button type="primary" @click="playPause">Play/Pause</el-button>
  </div>
</template>

2.导入并注册插件

导入 Minimap 插件，并在 plugins 属性中添加 Minimap 插件的相关配置：

<script setup lang="ts">
import Minimap from 'wavesurfer.js/dist/plugins/minimap.js'
function initWaveSurfer() {
    wavesurfer = WaveSurfer.create({
        container: '#waveform', // 绑定容器
        url: '/music.mp3',  // 音频地址，使用的是 vite，将文件放到根目录 public 下才有用
        autoCenter: false, // 自动播放
        plugins: [
            Minimap.create({
            container: '#minimap',
            height: 20,
            waveColor: '#ddd',
            progressColor: '#999',
          }),
        ]
    })
}
</script>

3.Doc & Examples

• Minimap 插件 API 文档
• Minimap Examples

八、Spectrogram 插件

1.导入并注册插件

导入 Spectrogram 插件，并在 plugins 属性中添加 Spectrogram 插件的相关配置：

<script setup lang="ts">
import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.js'
function initWaveSurfer() {
    wavesurfer = WaveSurfer.create({
        container: '#waveform', // 绑定容器
        url: '/music.mp3',  // 音频地址，使用的是 vite，将文件放到根目录 public 下才有用
        plugins: [
           Spectrogram.create({
               labels: true,
               labelsBackground: 'lightgray',
               labelsColor: 'red',
               labelsHzColor: 'red',
               height: 260,
           }),
        ]
    })
}
</script>

2.Doc & Examples

• Spectrogram 插件 API 文档
• Spectrogram Examples