vue怎么使用wavesurfer.js解決音頻可視化播放問題

這篇文章主要介紹“vue怎么使用wavesurfer.js解決音頻可視化播放問題”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么使用wavesurfer.js解決音頻可視化播放問題”文章能幫助大家解決問題。

效果圖如下所示：

1.安裝wavesurfer

npm install wavesurfer.js

2.在頁面導入

import WaveSurfer from 'wavesurfer.js'

注:我沒有使用時間軸，所以沒有引入，如果需要再引入

import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'

3.上源碼

<template>
  <el-row>
    <el-card class="card" :body->
      <div id="waveform" ref="waveform">
      </div>
    </el-card>
  </el-row>
  <div>
        <el-button type="primary" @click="playMusic">
          <i class="el-icon-video-play"></i>
          播放 /
          <i class="el-icon-video-pausee"></i>
          暫停
        </el-button>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
// import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
export default {
  name: "Details",
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform,
        // waveColor: '#409EFF',
        barWidth: 1,
        cursorColor: "black",
        progressColor: "blue",
        backend: "MediaElement",
        // mediaControls: false,
        audioRate: "1",
        //使用時間軸插件
      });
      // 特別提醒：此處需要使用require(相對路徑)，否則會報錯
      this.wavesurfer.load(require("../mp3/living.mp3"));
    });
  methods: {
    playMusic() {
      //"播放/暫停"按鈕的單擊觸發事件，暫停的話單擊則播放，正在播放的話單擊則暫停播放
      this.wavesurfer.playPause.bind(this.wavesurfer)();
    },
};
</script>
<style >
.mixin-components-container {
  width: 100% !important;
  #f0f2f5;
  padding: 30px;
  /* min-height: calc(100vh - 84px); */
}
.el-card__body {
  height: 70px !important;
  padding: 0 auto !important;
.card {
  height: 70px;
#waveform {
wave {
  height: 50px !important;
</style>

4.注釋：

這個插件實在太吊了，官方文檔太厲害，上鏈接：https://wavesurfer-js.org/

我用到了幾個方法：

4.1.

this.wavesurfer.play(0, 212); 指定開始時間和結束時間，以秒為單位，0秒開始，212秒結束

4.2.

this.wavesurfer.on("pause", () => {
console.log('我暫停了')
});

監聽暫停

4.3.

this.wavesurfer.load(require("../mp3/living.mp3")); 讀取目錄路徑里面的Mp3文件，可以測試用
this.wavesurfer.load('xxx.mp3')); 讀取網絡地址，有接口就用這個

關于“vue怎么使用wavesurfer.js解決音頻可視化播放問題”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。