vue中使用wavesurfer.js实现语音播放波形显示

最新推荐文章于 2025-07-29 13:39:10 发布

嘘，此处属於婷

最新推荐文章于 2025-07-29 13:39:10 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小功能文章标签： vue

本文链接：https://blog.youkuaiyun.com/AiTingYan/article/details/118178347

小功能专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用wavesurfer.js插件来实现实时音频播放控制，包括安装步骤、组件结构与样式设置，以及在实际场景中的调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：
在这里插入图片描述
1、第一步：使用以下命令安装wavesurfer.js插件库

npm install wavesurfer.js --save

2、第二步：在compenets文件夹创建voice.vue

<template>
  <div :class="{'voice_wrap':true,'large':duration>40,'middle':duration>20&&duration<41,'small':duration<21}">
    <img v-if="!isplay" src="@/assets/img/play.png" alt="" @click="play">
    <img v-else src="@/assets/img/pause.png" alt="" @click="pause">
    <div class="voice_time_line" :id="'wave'+id"></div>
    <div class="duration">{{duration}}"</div>
  </div>
</template>

<script>
//引入wavesurfer.js
import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
export default {
  props:{
    id:Number,
    url:String,
    duration:Number
  },
  data(){
    return {
      isplay:false,
      wavesurfer: null,
    }
  },
  mounted(){
    let that = this;
    this.$nextTick(()=>{
      that.wavesurfer = WaveSurfer.create({
        height:24,
		container: '#wave' + that.id,
        cursorColor:'transparent',
        maxCanvasWidth:60,
        progressColor:'rgba(255,255,255,1)',
        waveColor:'rgba(255,255,255,0.4)',
        barGap:1.8,
        barWidth:1.2,
        barHeight:16,
        barMinHeight:0.5
      });
      // 特别提醒：如果是本地文件此处需要使用require(相对路径)，否则会报错
      that.wavesurfer.load(that.url);
      that.wavesurfer.on('finish', function () {
		  console.log('播放完毕：finish');
        that.isplay = false;
        that.wavesurfer.stop();
      });
    })
  },
  methods:{
    play(){
      this.isplay = true;
      this.wavesurfer.play();
    },
    pause(){
      this.isplay = false;
      this.wavesurfer.pause();
    }
  }
}
</script>

<style lang="scss">
  .voice_wrap{
    background: #94BDEC;
    border-radius: 18px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    img{
      width: 24px;
      height: 24px;
      margin-right: 4px;
    }
    .voice_time_line{
      height: 24px;
    }
    .duration{
      font-size: 16px;
      line-height: 22px;
      color: #fff;
      margin-left: 8px;
    }
  }
  .voice_wrap.large{
    width: 262px;
    .voice_time_line{
      width: 177px;
    }
  }
  .voice_wrap.middle{
    width: 203px;
    .voice_time_line{
      width: 118px;
    }
  }
  .voice_wrap.small{
    width: 144px;
    .voice_time_line{
      width: 59px;
    }
  }
</style>

3、第三步：在要使用该组件的地方调用

<template>
  <div>
   <Voice :ref="'voice'+id" :id="id" :url="audio.url" :duration="audio.du"></Voice>
  </div>
</template>

<script>
import Voice from '@/components/commentsVoice/index.vue'
export default {
  data(){
    return{
      id:12,
      audio:{
      	url:'',
      	du:''
	  }
    }
  },
  mounted(){
  
  },
  methods:{
   
  },
  components:{
    Voice
  }
}
</script>
<style lang="scss" scoped>
  
</style>