JS如使用音頻可視化插件Wavesurfer.js

這篇文章主要為大家展示了“JS如使用音頻可視化插件Wavesurfer.js”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如使用音頻可視化插件Wavesurfer.js”這篇文章吧。

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺(jué)效果插件Regions插件的使用方法。

1、創(chuàng)建實(shí)例

引入插件

import WaveSurfer from "wavesurfer.js";

創(chuàng)建實(shí)例對(duì)象

this.wavesurfer = WaveSurfer.create(options);

options

實(shí)例演示：

this.wavesurfer = WaveSurfer.create({
  container: "#wave",
  waveColor: "#368666",
  progressColor: "#6d9e8b",
  cursorColor: "#fff",
  height: 80,
  plugins: [RegionsPlugin.create()]
});

2、方法調(diào)用

實(shí)例演示

// 音頻加載
this.wavesurfer.load(audioUrl);

// 獲取總時(shí)長(zhǎng)
let duration = parseInt(this.wavesurfer.getDuration());

// 停止播放并回到起始點(diǎn)
this.wavesurfer.stop();

3、事件綁定

使用on()和un()對(duì)事件進(jìn)行綁定和解綁操作。

實(shí)例演示：

// 加載時(shí)候
this.wavesurfer.on("loading", percents => {
  // 當(dāng)前加載的進(jìn)度
  this.percent = percents;
});

// 加載成功
this.wavesurfer.on("ready", () => {
  this.progress = false;
});

// 播放中
this.wavesurfer.on("audioprocess", () => {
  this.currentTime = this.getCurrentTime();
});

// 結(jié)束播放
this.wavesurfer.on("finish", () => {
  this.wavesurfer.pause();
});

4、Regions插件

Regions用于音頻播放器waveform視覺(jué)效果部分，可以用它來(lái)標(biāo)注某個(gè)區(qū)域。Regions可以被拖拽和改變尺寸大小。

引入插件

import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";

插件定義

this.wavesurfer = WaveSurfer.create({     
  plugins: [RegionsPlugin.create()]
});

Regions方法

實(shí)例演示：

this.currentRegion = this.wavesurfer.addRegion({
  id: id,
  start: startTime,
  end: endTime,
  loop: false,
  drag: false,
  resize: false,
  color: "rgba(254, 255, 255, 0.4)"
});

Regions的方法

Regions事件

// 更新起始時(shí)間
this.currentRegion.update({ start: newStartTime });

// 移除region
this.currentRegion.remove();

以上是“JS如使用音頻可視化插件Wavesurfer.js”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！