声纹可视化工具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>
三、结果展示