目录
实现效果
左上电池是我扣的datav组件 可以忽略
安装/引用组件
npm install wavesurfer.js --save（datav安装）
npm install @jiaminghi/data-view在使用界面引用
import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件（datav引用)
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)dom代码
<template>
<div id="app" >
<!-- 电池图 -->
<dv-percent-pond :config="config" style="width:200px;height:100px;" />
<div slot="header" class="clearfix title">
<span>播放进度{
{percent}}%</span>
</div>
<el-card >
<div id="waveform" ref="waveform" @click="getTime">
<!-- Here be the waveform -->
</div>
<div id="wave-timeline" ref="wave-timeline">
<!--时间轴 -->
</div>
</el-card>
<div>
<!-- 播放/暂停按钮 -->
<button @click="playMusic">
<i class="el-icon-video-play"></i>
播放 /
<i class="el-icon-video-pausee"></i>
暂停
</button>
</div>
<el-row>
<!-- 进度跳转 -->
<button @click="jump">24</button>
<button @click="jump">50</button>
</el-row>
</div>
</template>
(关键!)官方文档/大佬翻译文档
官方文档https://wavesurfer-js.org/
https://wavesurfer-js.org/翻译文档https://www.cnblogs.com/webhmy/p/9883150.htmlhttps://www.cnblogs.com/webhmy/p/9883150.html
js代码
<script >
import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件
export default {
name: 'App',
data() {
return {
wavesurfer: null,
timer:null,
percent:0,
config:{
value:0
},
};
},
created() {
},
mounted() {
//挂载声纹
this.$nextTick(() => {
console.log(WaveSurfer)
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
waveColor: '#409EFF',
progressColor: 'blue',
backend: 'MediaElement',
mediaControls: false,
audioRate: '1',
hideScrollbar:true,
//使用时间轴插件
// plugins: [
// Timeline.create({
// container: '#wave-timeline'
// }),
// ]
});
// 特别提醒：此处需要使用require(相对路径)，否则会报错
this.wavesurfer.load(require('./assets/Alpharise.mp3'));
})
},
methods: {
playMusic() {
//"播放/暂停"按钮的单击触发事件，暂停的话单击则播放，正在播放的话单击则暂停播放
this.wavesurfer.playPause.bind(this.wavesurfer)()
//每秒获取进度
this.getProcess()
},
getProcess(){
if(this.wavesurfer.isPlaying()){
this.timer=setInterval(()=>{
this.percent=(this.wavesurfer.getCurrentTime().toFixed(0)/this.wavesurfer.getDuration()*100).toFixed(0)
this.config={
value:this.percent
}
},1000)
}else{
clearInterval(this.timer)
}
},
//点击获取点击进度
getTime(){
setTimeout(()=>{
this.percent=(this.wavesurfer.getCurrentTime()/this.wavesurfer.getDuration()*100).toFixed(0)
this.config={
value:this.percent
}
},100)
},
//按键跳转进度
jump(e){
console.log(e.target.innerHTML-0);
this.wavesurfer.play([e.target.innerHTML-0])
this.percent=(this.wavesurfer.getCurrentTime().toFixed(0)/this.wavesurfer.getDuration()*100).toFixed(0)
this.config={
value:this.percent
}
this.getProcess()
}
}
}
</script>css代码
<style scoped="scoped">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/* #wave-timeline{
display: none;
} */
#waterform{
overflow: hidden;
}
.box-card {
width: 100%;
}
/deep/.dv-percent-pond svg text{
fill: #000000;
stroke: #000000;
}
</style>完整代码
<template>
<div id="app" >
<!-- 电池图 -->
<dv-percent-pond :config="config" style="width:200px;height:100px;" />
<div slot="header" class="clearfix title">
<span>播放进度{
{percent}}%</span>
</div>
<el-card >
<div id="waveform" ref="waveform" @click="getTime">
<!-- Here be the waveform -->
</div>
<div id="wave-timeline" ref="wave-timeline">
<!--时间轴 -->
</div>
</el-card>
<div>
<!-- 播放/暂停按钮 -->
<button @click="playMusic">
<i class="el-icon-video-play"></i>
播放 /
<i class="el-icon-video-pausee"></i>
暂停
</button>
</div>
<el-row>
<!-- 进度跳转 -->
<button @click="jump">24</button>
<button @click="jump">50</button>
</el-row>
</div>
</template>
<script >
import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件
export default {
name: 'App',
data() {
return {
wavesurfer: null,
timer:null,
percent:0,
config:{
value:0
},
};
},
created() {
},
mounted() {
//挂载声纹
this.$nextTick(() => {
console.log(WaveSurfer)
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
waveColor: '#409EFF',
progressColor: 'blue',
backend: 'MediaElement',
mediaControls: false,
audioRate: '1',
hideScrollbar:true,
//使用时间轴插件
// plugins: [
// Timeline.create({
// container: '#wave-timeline'
// }),
// ]
});
// 特别提醒：此处需要使用require(相对路径)，否则会报错
this.wavesurfer.load(require('./assets/Alpharise.mp3'));
})
},
methods: {
playMusic() {
//"播放/暂停"按钮的单击触发事件，暂停的话单击则播放，正在播放的话单击则暂停播放
this.wavesurfer.playPause.bind(this.wavesurfer)()
//每秒获取进度
this.getProcess()
},
getProcess(){
if(this.wavesurfer.isPlaying()){
this.timer=setInterval(()=>{
this.percent=(this.wavesurfer.getCurrentTime().toFixed(0)/this.wavesurfer.getDuration()*100).toFixed(0)
this.config={
value:this.percent
}
},1000)
}else{
clearInterval(this.timer)
}
},
//点击获取点击进度
getTime(){
setTimeout(()=>{
this.percent=(this.wavesurfer.getCurrentTime()/this.wavesurfer.getDuration()*100).toFixed(0)
this.config={
value:this.percent
}
},100)
},
//按键跳转进度
jump(e){
console.log(e.target.innerHTML-0);
this.wavesurfer.play([e.target.innerHTML-0])
this.percent=(this.wavesurfer.getCurrentTime().toFixed(0)/this.wavesurfer.getDuration()*100).toFixed(0)
this.config={
value:this.percent
}
this.getProcess()
}
}
}
</script>
<style scoped="scoped">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/* #wave-timeline{
display: none;
} */
#waterform{
overflow: hidden;
}
.box-card {
width: 100%;
}
/deep/.dv-percent-pond svg text{
fill: #000000;
stroke: #000000;
}
</style>