wavesurfer.js绘制音频波形图的实现

 更新时间:2021年04月07日 10:20:31   作者:GuaX  
这篇文章主要介绍了wavesurfer.js绘制音频波形图的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.查看效果图

向前选中:

向后选中:

代码如下(示例):

<template>
 <div class="waveSurfer">
  <div class="top">
   <span @click="leftSelect">向前选中</span>
   <span @click="rightSelect">向后选中</span>
   <span @click="Region">标注</span>
  </div>
  <!-- 时间轴 -->
  <div id="wave-timeline" />
  <!-- 频谱图 -->
  <div id="waveform">
   <progress
    id="progress"
    class="progress progress-striped"
    value="0"
    max="100"
   ></progress>
  </div>
  <div v-show="ppt" id="wave-spectrogram" class="mt-20" />
  <!-- 控制按钮 -->
  <div class="title">
   <ul>
    <li>
     <span @click="zoomIn"></span>
    </li>
    <li>
     <span @click="rew"></span>
    </li>
    <li>
     <span :class="{ on: isPlay }" @click="plays"></span>
    </li>
    <li>
     <span @click="speek"></span>
    </li>
    <li>
     <span @click="zoomOut"></span>
    </li>
    <li>
     <span @click="replay"></span>
    </li>
    <li @click="toggleMute" :class="{ on: toggleMutebutton }" class="sound">
     <span></span>
    </li>
    <li>
     <input
      @mouseup="volumeBarHandle"
      v-model="volValue"
      type="range"
      min="0"
      max="1"
      value="0.8"
      step="0.01"
     />
    </li>
    <li @click="DoubleSpeed(index)">
     {{ speed[index] + " X" }}
    </li>
   </ul>
  </div>
 </div>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
import Regions from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
export default {
 data: function () {
  return {
   index: 0,
   speed: [1.0, 1.5, 2.0, 0.5],
   isPlay: false,
   ppt: false,
   ds: 1.0,
   zoomValue: 100,
   zoomMin: 100,
   fast: 3,
   back: 3,
   noteData: [],
   toggleMutebutton: true,
   volValue: 0,
   audioUrl: "",
   loading: true,
  };
 },
 // computed: {
 //  // 计算属性的 getter
 //  getUrl: function() {
 //   // `this` 指向 vm 实例
 //   return this.$store.state.voicetrain.url
 //  }
 // },
 // watch: {
 //  getUrl(newUrl) {
 //   this.loading = true
 //   this.audioUrl = newUrl
 //   document.getElementById('waveform').innerHTML = ''
 //   this.init()
 //  }
 // },
 mounted() {
  this.audioUrl =
   "http://192.168.1.101:8080/api/files/20201104/62afa213458d44b0a99440b33fb694b9";
  this.init();
 },
 
 methods: {
  // 初始化
  init() {
   document.getElementById("progress").style.display = "block";
   this.$nextTick(() => {
    this.wavesurfer = WaveSurfer.create({
     container: "#waveform",
     cursorColor: "#DB7093", // 声波播放进度线color
     audioRate: 1,
     scrollParent: true,
     backend: "WebAudio",
     barHeight: 1.5,
     waveColor: "#43d996", // 声波color
     progressColor: "#43d996", // 已播放声波color
     loaderColor: "#8B0000",
     hideScrollbar: false,
     autoCenter: true,
     height: 120,
     splitChannels: true,
     responsive: true,
     minPxPerSec: 1,
     plugins: [
      Timeline.create({
       container: "#wave-timeline",
       fontSize: 14,
       primaryFontColor: "#9191a5",
       secondaryFontColor: "#9191a5",
       primaryColor: "#9191a5",
       secondaryColor: "#9191a5",
      }),
      Regions.create({}),
     ],
    });
    this.wavesurfer.addRegion({
     loop: false,
     drag: false,
     resize: false,
     color: "rgba(254, 255, 255, 0.4)",
    });
    // 加载进度条
    this.wavesurfer.on("loading", function (percents) {
     document.getElementById("progress").value = percents;
    });
    this.wavesurfer.load(this.audioUrl);
    this.value = this.wavesurfer.getVolume() * 100; // 获取音量
    this.zoomValue = this.wavesurfer.params.minPxPerSec;
    this.zoomMin = this.wavesurfer.params.minPxPerSec;
    this.wavesurfer.zoom(Number(this.zoomValue));
    this.wavesurfer.panner = this.wavesurfer.backend.ac.createPanner();
    this.wavesurfer.backend.setFilter(this.wavesurfer.panner);
    let _this = this;
    _this.wavesurfer.on("ready", function () {
     _this.wavesurfer.enableDragSelection({
      color: "rgba(0, 180, 0, 0.3)",
     });
     _this.wavesurfer.clearRegions();
     _this.wavesurfer.zoom(_this.zoomValue);
     // 音频加载完成
     document.getElementById("progress").style.display = "none";
     document.getElementById("progress").value = 0;
     _this.isPlay = true;
     _this.wavesurfer.play(0);
    });
    document.getElementById("waveform").onclick = function () {
     _this.isPlay = false;
     _this.wavesurfer.clearRegions();
    };
    // 更新区域时。回调将接收该Region对象。
    // this.wavesurfer.on("region-updated", function (region) {
    //  region.playLoop(); // 循环播放选中区域
    //  _this.isPlay = true;
    // });
    _this.wavesurfer.on("region-created", _this.addRegion);
    _this.wavesurfer.on("region-click", _this.editAnnotation);
 
    _this.wavesurfer.on("finish", function () {
     _this.wavesurfer.play(0);
    });
   });
  },
  addRegion(params) {
   this.wavesurfer.clearRegions();
   params.handleLeftEl.style.backgroundColor = "transparent";
   params.handleRightEl.style.backgroundColor = "transparent";
  },
  toggleMute() {
   if (this.toggleMutebutton) {
    this.volumeCached = this.wavesurfer.getVolume();
    this.wavesurfer.setVolume(0);
    this.toggleMutebutton = false;
    this.volValue = 0;
   } else {
    if (this.volumeCached == 0) this.volumeCached = 1;
    this.wavesurfer.setVolume(this.volumeCached);
    this.toggleMutebutton = true;
    this.volValue = this.volumeCached;
   }
  },
  volumeBarHandle(e) {
   if (e.offsetX >= 0 && e.offsetX <= 80) {
    this.toggleMutebutton = true;
    this.wavesurfer.setVolume(e.offsetX / 80);
   } else if (e.offsetX < 0) {
    this.toggleMutebutton = false;
    this.wavesurfer.setVolume(0);
   } else {
    this.wavesurfer.setVolume(1);
    this.toggleMutebutton = true;
   }
  },
  // 标注
  Region() {
   console.log(
    Object.getOwnPropertyNames(this.wavesurfer.regions.list).length
   );
   if (
    Object.getOwnPropertyNames(this.wavesurfer.regions.list).length == 0
   ) {
    alert("请选择波纹");
    return;
   }
   let start = 0,
    end = 0;
   for (var k in this.wavesurfer.regions.list) {
    let obj = this.wavesurfer.regions.list[k];
    start = obj.start.toFixed(2) * 1000;
    end = obj.end.toFixed(2) * 1000;
   }
   console.log(this.wavesurfer);
   console.log("开始", start);
   console.log("结束", end);
  },
  // 播放
  plays() {
   this.isPlay = !this.isPlay;
   this.wavesurfer.playPause(); //切换播放,应用播放或暂停
  },
  // 回退
  rew() {
   this.wavesurfer.skip(-this.back);
   this.goPlay();
  },
  // 快进
  speek() {
   this.wavesurfer.skip(this.fast);
   this.goPlay();
  },
  // 重载
  replay() {
   this.isPlay = true;
   this.wavesurfer.stop();
   this.wavesurfer.clearRegions();
   this.wavesurfer.play(0);
  },
  // 倍速
  DoubleSpeed(index) {
   if (index === 3) {
    this.index = 0;
    this.wavesurfer.setPlaybackRate(this.speed[this.index]);
   } else {
    this.index = index + 1;
    this.wavesurfer.setPlaybackRate(this.speed[this.index]);
   }
   console.log(this.wavesurfer);
  },
  // 缩放百分比显示格式
  formatZoom(val) {
   return val + 100 + " 像素 / 秒";
  },
  // 点击缩小
  zoomIn() {
   if (this.zoomValue >= 100) {
    return;
   }
   this.zoomValue += 1;
   this.wavesurfer.zoom(this.zoomValue);
  },
  // 点击扩大
  zoomOut() {
   if (this.zoomValue < -100) {
    return;
   }
   this.zoomValue -= 1;
   this.wavesurfer.zoom(this.zoomValue);
  },
  // 缩放监听
  zoomChange() {
   this.wavesurfer.zoom(Number(this.zoomValue));
  },
  goPlay() {
   let start = this.wavesurfer.getCurrentTime();
   this.wavesurfer.play(start);
  },
  // 向前选中
  leftSelect() {
   let end = this.wavesurfer.getCurrentTime(); // 获取当前播放位置
   this.waveRegion(this.wavesurfer, 0, end, "rgba(0,180,0,.3)", true);
  },
  // 向后选中
  rightSelect() {
   let start = this.wavesurfer.getCurrentTime(); // 获取当前播放位置
   let end = this.wavesurfer.getDuration(); // 获取音频片段的持续时间
   this.waveRegion(this.wavesurfer, start, end, "rgba(0,180,0,.3)", true);
  },
  waveRegion(wavesurfer, start, end, color, clear) {
   if (!clear) {
    wavesurfer.clearRegions();
   }
   wavesurfer.addRegion({
    start: start,
    end: end,
    color: color,
    drag: false,
   });
  },
  // 区域点击事件新建
  saveRegions() {
   console.log("声纹点击---");
   this.noteData = [];
   const _this = this;
   this.noteData = Object.keys(_this.wavesurfer.regions.list).map(function (
    id
   ) {
    const region = _this.wavesurfer.regions.list[id];
    return {
     id: id,
     edit: false,
     start: Math.round(region.start * 10) / 10,
     end: Math.round(region.end * 10) / 10,
     attributes: region.attributes,
     data: { note: region.data.note || "" },
    };
   });
  },
  // 区域点击
  editAnnotation() {
   this.isPlay = false;
  },
  showNote(region) {
   if (!this.showNote.el) {
    this.showNote.el = document.querySelector("#subtitle");
   }
   this.showNote.el.textContent = region.data.note || "–";
  },
  // 设置音量
  setVolume(val) {
   console.log(val);
   this.wavesurfer.setVolume(val / 100);
  },
  // 实例点击
  clearReagion() {
   this.wavesurfer.clearRegions();
  },
 },
};
</script>
<style lang="scss" scoped>
#waveform {
 position: relative;
}
.top {
 width: 100%;
 flex-basis: 70px;
 line-height: 40px;
 flex-shrink: 0;
 color: white;
 text-indent: 15px;
 span,
 el-slider {
  color: rgb(39, 39, 39);
  font-size: 13px;
  font-weight: 700;
  margin-right: 20px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
 }
}
.title {
 width: 100%;
 flex-basis: 70px;
 line-height: 40px;
 text-align: left;
 flex-shrink: 0;
 color: white;
 text-indent: 15px;
 ul {
  list-style-type: none;
  padding-inline-start: 0;
  .speed {
   display: flex;
   flex-direction: column;
  }
  li {
   position: relative;
   display: inline-block;
   cursor: default;
   &:hover {
   }
   &:active {
   }
   span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
   }
   &:nth-child(1) span {
    width: 27px;
    height: 27px;
    background: url("img/缩小.png") right;
    background-size: cover;
   }
   &:nth-child(2) span {
    background: url("img/kuaitui_bg.png") right;
    background-size: cover;
   }
   &:nth-child(3) {
    span {
     background: url("img/bofang_bg.png") right;
     background-size: cover;
    }
    .on {
     background: url("img/zanting_bg.png") right;
     background-size: cover;
    }
   }
   &:nth-child(4) span {
    background: url("img/kuaijin_bg.png") right;
    background-size: cover;
   }
   &:nth-child(5) span {
    background: url("img/缩放.png") right;
    background-size: cover;
   }
   &:nth-child(6) span {
    background: url("img/zhongbo.png") right;
    background-size: cover;
   }
   &:nth-child(9) {
    color: rgb(39, 39, 39);
    font-size: 13px;
    font-weight: 700;
   }
   &:nth-child(7) {
    background: none;
    span {
     width: 25px;
     height: 25px;
     background: url("img/静音.png") no-repeat;
     background-size: cover;
    }
    &.on {
     span {
      width: 25px;
      height: 25px;
      background: url("img/喇叭.png") no-repeat;
      background-size: cover;
     }
    }
   }
   &:nth-child(8) {
    width: 80px;
    background: none;
    input {
     -webkit-appearance: none;
     -moz-appearance: none;
     -ms-appearance: none;
     width: 80px;
     height: 3px;
     background-color: #bbbbbb;
     position: absolute;
     left: 0;
     top: -14px;
 
     &::-webkit-slider-thumb {
      -webkit-appearance: none;
     }
     &::-moz-range-trackpseduo {
      -moz-appearance: none;
     }
     &::-ms-track {
      width: 100%;
      cursor: pointer;
      background: transparent; /* Hides the slider so custom styles can be added */
      border-color: transparent;
      color: transparent;
     }
     &:focus {
      outline: none;
     }
     &::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 9px;
      width: 9px;
      margin-top: -1px;
      background: #bbb;
      border-radius: 50%;
      border: solid 0.125em rgba(205, 224, 230, 0.5);
     }
     &::-moz-range-thumb {
      -moz-appearance: none;
      height: 6px;
      width: 6px;
      margin-top: -1px;
      background: #bbb;
      border-radius: 50%;
      border: solid 0.125em rgba(205, 224, 230, 0.5);
     }
     &::-ms-track {
      -moz-appearance: none;
      height: 6px;
      width: 6px;
      margin-top: -1px;
      background: #bbb;
      border-radius: 50%;
      border: solid 0.125em rgba(205, 224, 230, 0.5);
     }
    }
   }
  }
 }
}
#wave-timeline {
 height: 21px;
}
#waveform {
 width: 100%;
 flex-basis: 128px;
 flex-shrink: 0;
 position: relative;
}
#progress {
 position: absolute;
 width: 100%;
 height: 4px;
 background: #ccc;
 top: 48%;
 opacity: 0.7;
 z-index: 44;
}
.mt-20 {
 margin-top: 20px;
}
.mt-30 {
 margin-top: 30px;
}
.waveSurfer {
 width: 470px;
}
.waveSurfer >>> .el-slider__runway {
 margin: 6px 0;
}
</style>

链接:https://wavesurfer-js.org

到此这篇关于wavesurfer.js绘制音频波形图的实现的文章就介绍到这了,更多相关wavesurfer.js 音频波形图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现页面多个日期时间倒计时效果

    js实现页面多个日期时间倒计时效果

    这篇文章主要为大家详细介绍了js实现页面多个日期时间倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • js添加类名的两种方法

    js添加类名的两种方法

    这篇文章主要介绍了js添加类名的两种方法,一种是通过className来添加、删除类名,另一种是通过classList来添加、删除类名,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • JavaScript表单验证实现过程详解

    JavaScript表单验证实现过程详解

    表单校验是注册环节中必不可少的操作,表单校验通过一定的规则来确保用户提交数据的有效性,下面这篇文章主要给大家介绍了关于el-form表单验证的一些实用方法,需要的朋友可以参考下
    2023-01-01
  • 关于字符串和对象互转以及JSON.parse()的坑

    关于字符串和对象互转以及JSON.parse()的坑

    这篇文章主要介绍了关于字符串和对象互转以及JSON.parse()的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 通过 Dom 方法提高 innerHTML 性能

    通过 Dom 方法提高 innerHTML 性能

    此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍,replace 50 倍。
    2008-03-03
  • JS和canvas实现俄罗斯方块

    JS和canvas实现俄罗斯方块

    本文主要介绍了JS和canvas实现俄罗斯方块的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript设计模式--桥梁模式引入操作实例分析

    JavaScript设计模式--桥梁模式引入操作实例分析

    这篇文章主要介绍了JavaScript设计模式--桥梁模式,结合实例形式分析了JavaScript设计模式中桥梁模式应用操作技巧与注意事项,需要的朋友可以参考下
    2020-05-05
  • 使用JavaScript实现链表的数据结构的代码

    使用JavaScript实现链表的数据结构的代码

    链表(Linked list)是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现
    2017-08-08
  • javascript解锁前端密码框常见功能做法

    javascript解锁前端密码框常见功能做法

    这篇文章主要为大家介绍了javascript解锁前端密码框常见功能做法示例演示,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-03-03
  • 发布一个基于javascript的动画类 Fx.js

    发布一个基于javascript的动画类 Fx.js

    支持大部分CSS3属性的动画(可能要指定详细的属性值)。
    2010-11-11

最新评论