Vue使用wavesurfer.js实现音频可视化

原创已于 2025-06-27 13:55:16 修改 · 988 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-28 16:35:58 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue使用wavesurfer.js实现音频可视化</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
margin-top: 30px;
}
.waveform {
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
.controls {
margin: 20px 0;
display: flex;
gap: 10px;
}
button {
padding: 8px 16px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #369f6e;
}
h1, h2 {
color: #2c3e50;
}
a {
color: #42b983;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.info {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Vue使用wavesurfer.js实现音频可视化</h1>

<div class="info">
<p>本示例展示了如何在Vue项目中使用wavesurfer.js库来实现音频波形可视化。wavesurfer.js是一个基于Web Audio API的音频波形可视化库，非常适合在网页中展示音频文件。</p>

</div>

<div class="container">
<h2>音频播放器</h2>

<div id="waveform" class="waveform"></div>

<div class="controls">
<button @click="playPause">{{ isPlaying ? '暂停' : '播放' }}</button>
<button @click="stop">停止</button>
<input type="range" v-model="volume" min="0" max="1" step="0.1" @input="changeVolume">
<span>音量: {{ volume }}</span>
</div>

<div>
<label for="audioFile">选择音频文件:</label>
<input type="file" id="audioFile" accept="audio/*" @change="loadAudio">
</div>

<div v-if="duration">
<p>当前时间: {{ currentTime }} / 总时长: {{ duration }}</p>
</div>
</div>

<div class="container">
<h2>实现步骤详解</h2>

<h3>1. 安装和引入</h3>
<p>首先需要引入Vue和wavesurfer.js库。可以通过CDN或npm安装:</p>
<pre>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script></pre>

<h3>2. 创建Vue实例和波形容器</h3>
<p>在HTML中创建一个div作为波形图的容器:</p>
<pre>
<div id="waveform"></div></pre>

<h3>3. 初始化wavesurfer</h3>
<p>在Vue的mounted生命周期钩子中初始化wavesurfer实例:</p>
<pre>
mounted() {
this.wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#42b983',
progressColor: '#369f6e',
cursorColor: '#2c3e50',
barWidth: 2,
responsive: true,
height: 100
});

// 绑定事件监听器
this.wavesurfer.on('ready', this.onReady);
this.wavesurfer.on('audioprocess', this.updateTime);
this.wavesurfer.on('finish', this.onFinish);
}</pre>

<h3>4. 实现控制方法</h3>
<p>实现播放、暂停、停止等方法:</p>
<pre>
methods: {
playPause() {
this.wavesurfer.playPause();
this.isPlaying = !this.isPlaying;
},
stop() {
this.wavesurfer.stop();
this.isPlaying = false;
},
changeVolume() {
this.wavesurfer.setVolume(this.volume);
},
loadAudio(event) {
const files = event.target.files;
if (files.length) {
const file = files[0];
const objectUrl = URL.createObjectURL(file);
this.wavesurfer.load(objectUrl);
}
},
onReady() {
this.duration = this.formatTime(this.wavesurfer.getDuration());
},
updateTime() {
this.currentTime = this.formatTime(this.wavesurfer.getCurrentTime());
},
onFinish() {
this.isPlaying = false;
},
formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}
}</pre>
</div>
</div>