声纹可视化工具wavesurfer播放与暂停

一、安装wavesurfer

npm install wavesurfer.js

二、引入与创建

<template>      
  <div id="app">      
    <input type="file" @change="onFileChange" />      
    <button @click="playAudio" class="audio-button">播放</button>      
    <button @click="pauseAudio" class="audio-button">暂停</button>      
    <div id="waveform"></div>      
  </div>      
</template>   


<style scoped>  
.audio-button {  
  background-color: #bfb0fb; /* 这将设置按钮的背景色为音量图的颜色 */  
}  
</style>  


<script>      
import Wavesurfer from "wavesurfer.js";      

export default {      
  data() {      
    return {      
      file: null,      
      waveform: null,      
      wavesurfer: null,      
      isPlaying: false,      
    };      
  },      
  methods: {      
    onFileChange(e) {      
      this.file = e.target.files[0];      
      this.loadWaveform();      
    },    
    loadWaveform() {  
      if (this.wavesurfer) {    
        this.wavesurfer.destroy();    
      }    
      const reader = new FileReader();    
      reader.onload = (e) => {    
        this.wavesurfer = Wavesurfer.create({    
          container: document.getElementById("waveform"),    
          waveHeight: 100,    
          progressColor: "#d384fe", // 这将设置进度条的颜色为播放按钮的颜色  
          cursorColor: "#d0bdda",    
          hideScrollbar: true,    
          responsive: true,    
          waveColor: "#bfb0fb", // 这将设置音量图的颜色为按钮的颜色  
        });    
        this.wavesurfer.load(e.target.result);    
      };    
      reader.readAsDataURL(this.file);    
    },      
    playAudio() {      
      if (!this.isPlaying) {      
        this.wavesurfer.play();      
        this.isPlaying = true;      
      }      
    },      
    pauseAudio() {      
      if (this.isPlaying) {      
        this.wavesurfer.pause();      
        this.isPlaying = false;      
      }      
    },      
  },      
};      
</script> 

三、结果展示