vue实现音频标注
Vue 实现音频标注的方法
安装必要依赖
需要安装音频处理库如 wavesurfer.js 或 howler.js，用于音频播放与波形渲染。通过 npm 安装：
npm install wavesurfer.js初始化音频播放器
在 Vue 组件中引入并初始化 Wavesurfer，设置容器和基础配置：
import WaveSurfer from 'wavesurfer.js';
export default {
data() {
return {
wavesurfer: null,
audioUrl: 'your-audio-file.mp3'
};
},
mounted() {
this.wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
this.wavesurfer.load(this.audioUrl);
}
};添加标注功能
通过监听音频播放进度和用户交互实现标注。示例代码：
methods: {
addRegion(start, end) {
this.wavesurfer.addRegion({
start: start,
end: end,
color: 'rgba(255, 0, 0, 0.3)'
});
},
handleClick() {
const currentTime = this.wavesurfer.getCurrentTime();
// 示例：标注当前时间点前后 2 秒范围
this.addRegion(currentTime - 2, currentTime + 2);
}
}标注数据存储
使用 Vue 的响应式数据存储标注信息，并可根据需要提交至后端：
data() {
return {
annotations: []
};
},
methods: {
saveAnnotation(region) {
this.annotations.push({
start: region.start,
end: region.end,
note: 'Sample note'
});
}
}界面布局示例
模板部分需包含波形容器和操作按钮：
<template>
<div>
<div id="waveform"></div>
<button @click="handleClick">添加标注</button>
<div v-for="(item, index) in annotations" :key="index">
标注 {{ index + 1 }}: {{ item.start.toFixed(2) }}s - {{ item.end.toFixed(2) }}s
</div>
</div>
</template>进阶功能扩展
- 拖拽调整标注区域：启用
dragSelection配置项允许用户拖动选择范围 - 标注编辑：通过
region.update()动态修改标注时间范围 - 分段播放：利用
wavesurfer.play(start, end)实现指定区间循环播放
注意事项：
- 确保音频文件路径正确，跨域问题需配置服务器 CORS
- 移动端需额外处理触摸事件兼容性
- 大量标注时可考虑虚拟滚动优化渲染性能
