vue使用wavesurfer.js

vue使用wavesurfer.js

安装wavesurfer

npm install wavesurfer.js

页面中引入

import WaveSurfer from 'wavesurfer.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'

Html

<div class="waveform-wrapper">
     <div id="waveform" ref="waveform">
        <!-- Here be the waveform -->
     </div>
     <div id="wave-timeline" ref="wave-timeline"></div>
     <div id="wave-spectrogram" class="wave-spectrogram"></div>
       <div>
          <el-button type="primary" @click="playMusic">
            <i class="el-icon-video-play"></i>
            播放 /
            <i class="el-icon-video-pausee"></i>
            暂停
          </el-button>
      </div> 
</div>

js

 mounted() {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform,
        // waveColor: '#4c72bd',
        waveColor: '#409EFF',
        progressColor: '#409EFF',
        //   backgroundColor:'#1d2741',
        backend: 'MediaElement',
        mediaControls: false,
        audioRate: '1',
        //使用时间轴插件
        plugins: [
          Timeline.create({
            container: '#wave-timeline',
            secondaryColor: '#fff',//次要时间标签颜色
            secondaryFontColor: '#fff',
            primaryColor: '#fff',//主要时间标签颜色
            primaryFontColor: '#fff',
            // labelPadding: 2
          }),
          Spectrogram.create({
             container: "#wave-spectrogram",
             labels: true,
             fftSamples: 512,
             colorMap: this.colorMap
          })
        ],
      });
      // 特别提醒：此处需要使用require(相对路径)，否则会报错
      this.wavesurfer.load(require('@/assets/two.mp3'));
      setTimeout(() => {
        this.second = parseInt(this.wavesurfer.getDuration())
      }, 1000)
    })
  },
methods: {
    playMusic() {
      this.wavesurfer.playPause.bind(this.wavesurfer)()
    }
  }

特别说明-colorMap

 colorMap: [[0, 0, 0, 1], [0.011764705882352941, 0, 0, 1], [0.023529411764705882, 0, 0, 1], [0.03529411764705882, 0, 0, 1], [0.047058823529411764, 0, 0, 1], [0.058823529411764705, 0, 0, 1], [0.07058823529411765, 0, 0, 1], [0.08235294117647059, 0, 0, 1], [0.09411764705882353, 0, 0, 1], [0.10588235294117647, 0, 0, 1], [0.11764705882352941, 0, 0, 1], [0.12941176470588237, 0, 0, 1], [0.1411764705882353, 0, 0, 1], [0.15294117647058825, 0, 0, 1], [0.16470588235294117, 0, 0, 1], [0.17647058823529413, 0, 0, 1], [0.18823529411764706, 0, 0, 1], [0.2, 0, 0, 1], [0.21176470588235294, 0, 0, 1], [0.2235294117647059, 0, 0, 1], [0.23529411764705882, 0, 0, 1], [0.24705882352941178, 0, 0, 1], [0.25882352941176473, 0, 0, 1], [0.27058823529411763, 0, 0, 1], [0.2823529411764706, 0, 0, 1], [0.29411764705882354, 0, 0, 1], [0.3058823529411765, 0, 0, 1], [0.3176470588235294, 0, 0, 1], [0.32941176470588235, 0, 0, 1], [0.3411764705882353, 0, 0, 1], [0.35294117647058826, 0, 0, 1], [0.36470588235294116, 0, 0, 1], [0.3764705882352941, 0, 0, 1], [0.38823529411764707, 0, 0, 1], [0.4, 0, 0, 1], [0.4117647058823529, 0, 0, 1], [0.4235294117647059, 0, 0, 1], [0.43529411764705883, 0, 0, 1], [0.4470588235294118, 0, 0, 1], [0.4549019607843137, 0, 0, 1], [0.4666666666666667, 0, 0, 1], [0.47843137254901963, 0, 0, 1], [0.49019607843137253, 0, 0, 1], [0.5019607843137255, 0, 0, 1], [0.5137254901960784, 0, 0, 1], [0.5254901960784314, 0, 0, 1], [0.5372549019607843, 0, 0, 1], [0.5490196078431373, 0, 0, 1], [0.5607843137254902, 0, 0, 1], [0.5725490196078431, 0, 0, 1], [0.5843137254901961, 0, 0, 1], [0.596078431372549, 0, 0, 1], [0.6078431372549019, 0, 0, 1], [0.6196078431372549, 0, 0, 1], [0.6313725490196078, 0, 0, 1], [0.6431372549019608, 0, 0, 1], [0.6549019607843137, 0, 0, 1], [0.6666666666666666, 0, 0, 1], [0.6784313725490196, 0, 0, 1], [0.6901960784313725, 0, 0, 1], [0.7019607843137254, 0, 0, 1], [0.7137254901960784, 0, 0, 1], [0.7254901960784313, 0, 0, 1], [0.7372549019607844, 0, 0, 1], [0.7490196078431373, 0, 0, 1], [0.7607843137254902, 0, 0, 1], [0.7725490196078432, 0, 0, 1], [0.7843137254901961, 0, 0, 1], [0.796078431372549, 0, 0, 1], [0.807843137254902, 0, 0, 1], [0.8196078431372549, 0, 0, 1], [0.8313725490196079, 0, 0, 1], [0.8431372549019608, 0, 0, 1], [0.8549019607843137, 0, 0, 1], [0.8666666666666667, 0, 0, 1], [0.8784313725490196, 0, 0, 1], [0.8901960784313725, 0, 0, 1], [0.9019607843137255, 0, 0, 1], [0.9019607843137255, 0.011764705882352941, 0, 1], [0.9058823529411765, 0.023529411764705882, 0, 1], [0.9058823529411765, 0.03137254901960784, 0, 1], [0.9058823529411765, 0.043137254901960784, 0, 1], [0.9098039215686274, 0.054901960784313725, 0, 1], [0.9098039215686274, 0.06666666666666667, 0, 1], [0.9098039215686274, 0.07450980392156863, 0, 1], [0.9137254901960784, 0.08627450980392157, 0, 1], [0.9137254901960784, 0.09803921568627451, 0, 1], [0.9137254901960784, 0.10980392156862745, 0, 1], [0.9176470588235294, 0.11764705882352941, 0, 1], [0.9176470588235294, 0.12941176470588237, 0, 1], [0.9176470588235294, 0.1411764705882353, 0, 1], [0.9215686274509803, 0.15294117647058825, 0, 1], [0.9215686274509803, 0.1607843137254902, 0, 1], [0.9215686274509803, 0.17254901960784313, 0, 1], [0.9254901960784314, 0.1843137254901961, 0, 1], [0.9254901960784314, 0.19607843137254902, 0, 1], [0.9254901960784314, 0.20784313725490197, 0, 1], [0.9294117647058824, 0.21568627450980393, 0, 1], [0.9294117647058824, 0.22745098039215686, 0, 1], [0.9294117647058824, 0.23921568627450981, 0, 1], [0.9333333333333333, 0.25098039215686274, 0, 1], [0.9333333333333333, 0.25882352941176473, 0, 1], [0.9333333333333333, 0.27058823529411763, 0, 1], [0.9372549019607843, 0.2823529411764706, 0, 1], [0.9372549019607843, 0.29411764705882354, 0, 1], [0.9372549019607843, 0.30196078431372547, 0, 1], [0.9411764705882353, 0.3137254901960784, 0, 1], [0.9411764705882353, 0.3254901960784314, 0, 1], [0.9411764705882353, 0.33725490196078434, 0, 1], [0.9450980392156862, 0.34509803921568627, 0, 1], [0.9450980392156862, 0.3568627450980392, 0, 1], [0.9450980392156862, 0.3686274509803922, 0, 1], [0.9490196078431372, 0.3803921568627451, 0, 1], [0.9490196078431372, 0.38823529411764707, 0, 1], [0.9490196078431372, 0.4, 0, 1], [0.9529411764705882, 0.4117647058823529, 0, 1], [0.9529411764705882, 0.4235294117647059, 0, 1], [0.9529411764705882, 0.43529411764705883, 0, 1], [0.9529411764705882, 0.44313725490196076, 0, 1], [0.9568627450980393, 0.4549019607843137, 0, 1], [0.9568627450980393, 0.4666666666666667, 0, 1], [0.9568627450980393, 0.47843137254901963, 0, 1], [0.9607843137254902, 0.48627450980392156, 0, 1], [0.9607843137254902, 0.4980392156862745, 0, 1], [0.9607843137254902, 0.5098039215686274, 0, 1], [0.9647058823529412, 0.5215686274509804, 0, 1], [0.9647058823529412, 0.5294117647058824, 0, 1], [0.9647058823529412, 0.5411764705882353, 0, 1], [0.9686274509803922, 0.5529411764705883, 0, 1], [0.9686274509803922, 0.5647058823529412, 0, 1], [0.9686274509803922, 0.5725490196078431, 0, 1], [0.9725490196078431, 0.5843137254901961, 0, 1], [0.9725490196078431, 0.596078431372549, 0, 1], [0.9725490196078431, 0.6078431372549019, 0, 1], [0.9764705882352941, 0.6196078431372549, 0, 1], [0.9764705882352941, 0.6274509803921569, 0, 1], [0.9764705882352941, 0.6392156862745098, 0, 1], [0.9803921568627451, 0.6509803921568628, 0, 1], [0.9803921568627451, 0.6627450980392157, 0, 1], [0.9803921568627451, 0.6705882352941176, 0, 1], [0.984313725490196, 0.6823529411764706, 0, 1], [0.984313725490196, 0.6941176470588235, 0, 1], [0.984313725490196, 0.7058823529411765, 0, 1], [0.9882352941176471, 0.7137254901960784, 0, 1], [0.9882352941176471, 0.7254901960784313, 0, 1], [0.9882352941176471, 0.7372549019607844, 0, 1], [0.9921568627450981, 0.7490196078431373, 0, 1], [0.9921568627450981, 0.7568627450980392, 0, 1], [0.9921568627450981, 0.7686274509803922, 0, 1], [0.996078431372549, 0.7803921568627451, 0, 1], [0.996078431372549, 0.792156862745098, 0, 1], [0.996078431372549, 0.8, 0, 1], [1, 0.8117647058823529, 0, 1], [1, 0.8235294117647058, 0, 1], [1, 0.8235294117647058, 0.011764705882352941, 1], [1, 0.8274509803921568, 0.0196078431372549, 1], [1, 0.8274509803921568, 0.03137254901960784, 1], [1, 0.8313725490196079, 0.0392156862745098, 1], [1, 0.8313725490196079, 0.050980392156862744, 1], [1, 0.8352941176470589, 0.058823529411764705, 1], [1, 0.8352941176470589, 0.07058823529411765, 1], [1, 0.8392156862745098, 0.0784313725490196, 1], [1, 0.8392156862745098, 0.09019607843137255, 1], [1, 0.8392156862745098, 0.09803921568627451, 1], [1, 0.8431372549019608, 0.10980392156862745, 1], [1, 0.8431372549019608, 0.11764705882352941, 1], [1, 0.8470588235294118, 0.12941176470588237, 1], [1, 0.8470588235294118, 0.13725490196078433, 1], [1, 0.8509803921568627, 0.14901960784313725, 1], [1, 0.8509803921568627, 0.1568627450980392, 1], [1, 0.8549019607843137, 0.16862745098039217, 1], [1, 0.8549019607843137, 0.17647058823529413, 1], [1, 0.8549019607843137, 0.18823529411764706, 1], [1, 0.8588235294117647, 0.19607843137254902, 1], [1, 0.8588235294117647, 0.20784313725490197, 1], [1, 0.8627450980392157, 0.21568627450980393, 1], [1, 0.8627450980392157, 0.22745098039215686, 1], [1, 0.8666666666666667, 0.23529411764705882, 1], [1, 0.8666666666666667, 0.24705882352941178, 1], [1, 0.8666666666666667, 0.2549019607843137, 1], [1, 0.8705882352941177, 0.26666666666666666, 1], [1, 0.8705882352941177, 0.27450980392156865, 1], [1, 0.8745098039215686, 0.28627450980392155, 1], [1, 0.8745098039215686, 0.29411764705882354, 1], [1, 0.8784313725490196, 0.3058823529411765, 1], [1, 0.8784313725490196, 0.3137254901960784, 1], [1, 0.8823529411764706, 0.3254901960784314, 1], [1, 0.8823529411764706, 0.3333333333333333, 1], [1, 0.8823529411764706, 0.34509803921568627, 1], [1, 0.8862745098039215, 0.35294117647058826, 1], [1, 0.8862745098039215, 0.36470588235294116, 1], [1, 0.8901960784313725, 0.37254901960784315, 1], [1, 0.8901960784313725, 0.3843137254901961, 1], [1, 0.8941176470588236, 0.39215686274509803, 1], [1, 0.8941176470588236, 0.403921568627451, 1], [1, 0.8980392156862745, 0.4117647058823529, 1], [1, 0.8980392156862745, 0.4235294117647059, 1], [1, 0.8980392156862745, 0.43137254901960786, 1], [1, 0.9019607843137255, 0.44313725490196076, 1], [1, 0.9019607843137255, 0.45098039215686275, 1], [1, 0.9058823529411765, 0.4627450980392157, 1], [1, 0.9058823529411765, 0.47058823529411764, 1], [1, 0.9098039215686274, 0.4823529411764706, 1], [1, 0.9098039215686274, 0.49019607843137253, 1], [1, 0.9137254901960784, 0.5019607843137255, 1], [1, 0.9137254901960784, 0.5098039215686274, 1], [1, 0.9137254901960784, 0.5215686274509804, 1], [1, 0.9176470588235294, 0.5294117647058824, 1], [1, 0.9176470588235294, 0.5411764705882353, 1], [1, 0.9215686274509803, 0.5490196078431373, 1], [1, 0.9215686274509803, 0.5607843137254902, 1], [1, 0.9254901960784314, 0.5686274509803921, 1], [1, 0.9254901960784314, 0.5803921568627451, 1], [1, 0.9254901960784314, 0.5882352941176471, 1], [1, 0.9294117647058824, 0.6, 1], [1, 0.9294117647058824, 0.6078431372549019, 1], [1, 0.9333333333333333, 0.6196078431372549, 1], [1, 0.9333333333333333, 0.6274509803921569, 1], [1, 0.9372549019607843, 0.6392156862745098, 1], [1, 0.9372549019607843, 0.6470588235294118, 1], [1, 0.9411764705882353, 0.6588235294117647, 1], [1, 0.9411764705882353, 0.6666666666666666, 1], [1, 0.9411764705882353, 0.6784313725490196, 1], [1, 0.9450980392156862, 0.6862745098039216, 1], [1, 0.9450980392156862, 0.6980392156862745, 1], [1, 0.9490196078431372, 0.7058823529411765, 1], [1, 0.9490196078431372, 0.7176470588235294, 1], [1, 0.9529411764705882, 0.7254901960784313, 1], [1, 0.9529411764705882, 0.7372549019607844, 1], [1, 0.9568627450980393, 0.7450980392156863, 1], [1, 0.9568627450980393, 0.7568627450980392, 1], [1, 0.9568627450980393, 0.7647058823529411, 1], [1, 0.9607843137254902, 0.7764705882352941, 1], [1, 0.9607843137254902, 0.7843137254901961, 1], [1, 0.9647058823529412, 0.796078431372549, 1], [1, 0.9647058823529412, 0.803921568627451, 1], [1, 0.9686274509803922, 0.8156862745098039, 1], [1, 0.9686274509803922, 0.8235294117647058, 1], [1, 0.9725490196078431, 0.8352941176470589, 1], [1, 0.9725490196078431, 0.8431372549019608, 1], [1, 0.9725490196078431, 0.8549019607843137, 1], [1, 0.9764705882352941, 0.8627450980392157, 1], [1, 0.9764705882352941, 0.8745098039215686, 1], [1, 0.9803921568627451, 0.8823529411764706, 1], [1, 0.9803921568627451, 0.8941176470588236, 1], [1, 0.984313725490196, 0.9019607843137255, 1], [1, 0.984313725490196, 0.9137254901960784, 1], [1, 0.984313725490196, 0.9215686274509803, 1], [1, 0.9882352941176471, 0.9333333333333333, 1], [1, 0.9882352941176471, 0.9411764705882353, 1], [1, 0.9921568627450981, 0.9529411764705882, 1], [1, 0.9921568627450981, 0.9607843137254902, 1], [1, 0.996078431372549, 0.9725490196078431, 1], [1, 0.996078431372549, 0.9803921568627451, 1], [1, 1, 0.9921568627450981, 1], [1, 1, 1, 1]]

手写进度条

    <!-- 进度条 -->
    <div class="text-align">
      <img :src="playImage" @click="changeStatus" class="i-left" />
    </div>
    <div class="progress-wrapper">
      <!-- 时间显示 -->
      <div class="progress-bar-wrapper">
        <div class="progress-bar" ref="progressBar" @click="progressClick">
          <div class="bar-inner">
            <div class="progress" ref="progress"></div>
            <div class="progress-btn-wrapper" ref="progressBtn">
              <div class="progress-btn"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <audio controls id="maudio" ref="maudio" preload="auto" style="display:none" @timeupdate="onTimeupdate" @ended="audioEnd">
      <source :src="audioURL" ref="msource" type="audio/mpeg">
    </audio>

  methods: {
    //播放时间
    onTimeupdate(e) {
      this.currentTime = e.target.currentTime;
    },
    //后退
    fastBack() {
      this.currentTime--;
      this.$refs.maudio.currentTime = this.currentTime;
    },
    //改变播放状态
    changeStatus() {
      if (this.playing) {
        this.$refs.maudio.pause();
      } else {
        this.$refs.maudio.play();
      }
      this.playing = !this.playing;
    },
    //快进
    forward() {
      this.currentTime++;
      this.$refs.maudio.currentTime = this.currentTime;
    },
    //处理
    handle(val) {
      //毫秒数转为时分秒
      // let s = showNum(val % 60);
      // let m = showNum(parseInt(val / 60) % 60);
      // let h = showNum(parseInt(val / 60 / 60));
      // this.currentDuration = h + ":" + m + ":" + s;
      this.percent = val / this.second;
    },
    //播放结束 修改播放状态
    audioEnd() {
      this.playing = false;
    },
    //点击进度条
    progressClick(e) {
      const rect = this.$refs.progressBar.getBoundingClientRect();
      const offsetWidth = e.pageX - rect.left;
      this.$refs.progress.style.width = offsetWidth;
      this.$refs.progressBtn.style.left = offsetWidth;
      this.percent = offsetWidth / rect.width;
      this.$refs.maudio.currentTime = this.second * this.percent;
      this.playing = true;
      this.$refs.maudio.play();
    }
  },
  watch: {
    //进度条变化
    percent(val) {
      let value = val * 100 + "%";
      this.$refs.progress.style.width = value;
      this.$refs.progressBtn.style.left = val * 100 + "%";
    },
    currentTime(val) {
      this.handle(val);
    }
  },
  computed: {
    //播放状态
    playImage() {
      return this.playing ? require('@/icons/image/play.png') : require('@/icons/image/stop.png');
    }
  }