wavesurfer.js绘制音频波形图

最新推荐文章于 2024-08-14 09:26:50 发布
最新推荐文章于 2024-08-14 09:26:50 发布
阅读量2.7k 收藏 13
点赞数 3
分类专栏： vue wavesurfer.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37714008/article/details/109776548
版权

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
GuaX
关注
专栏目录
html5添加音波波形图,wavesurfer.js绘制音频波形图的实现
weixin_28724661的博客
06-16 2027
1.查看效果图向前选中：向后选中：代码如下(示例)：向前选中向后选中标注id="progress"class="progress progress-striped"value="0"max="100">@mouseup="volumeBarHandle"v-model="volValue"type="range"min="0"max="1"value="0.8"step="0.01"/&gt...
wavesurfer.js_使用wavesurfer.js进行动态波形可视化
Web 开发&软件开发
08-05 3424
使用wavesurfer.js进行动态波形可视化 波形图像是无聊音频小部件的绝佳补充。 它们既实用又美观，允许用户直观地浏览音频。 我最近找到了waveurfer.js，这是一个了不起的波形图像实用程序，可用于Web Audio API来创建超级可自定义的波形可视化，只需一分钟即可实现。 观看演示 首先在页面中包含waveurfer.js： <script src="...
canvas绘制音频波形-纯js自写
11-04
canvas绘制音频波形demo
vue绘制语音波形图---wavesurfer.js
weixin_43956958的博客
02-04 3691
通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。封装websocket。
【项目推荐——音频标注 Wavesurfer 用法及相关问题解决】
weixin_56048772的博客
08-14 688
上期推荐了文本标注poplar-annotation用法，这期针对音视频标注推荐wavesurfer.js库；Wavesurfer.js 是一个基于Web Audio API 和HTML5 Canvas的开源音频可视化库，用于创建可交互、可定制的波形。同时拥有众多插件库。
Wavesurfer.js绘制波形图
weixin_47175934的博客
12-22 2306
要使用wavesurfer.js，首先需要在HTML文件中引入Wavesurfer.js库，然后创建一个音频元素并将其添加到页面中。接下来，初始化Wavesurfer实例并配置相关选项。现在，当你运行Vue项目时，wavesurfer.js应该已经成功下载并在页面上显示波形。4. 在Vue组件中引入并使用wavesurfer.js。我没找到wavesurfer.cursor.js文件，就注释了。替换为你要使用的音频文件路径。打开浏览器，查看效果。
vue 中使用wavesurfer.js绘制音频图案
qq_43477721的博客
11-24 2164
实现效果如下，包含后退，播放暂停，前进，指定播放，音量，播放倍速修改等功能 1、常用的方法如下： playPause() //播放时暂停，播放时暂停 skip(number) //从当前位置跳数秒（使用负值向后移动） stop() //重放 setVolume(newVolume) //将播放音量设置为新值[0…1]（0 =静音，1 =最大） play([start[, end]]) //从当前位置开始播放。可选start且end以秒为单位可用于设置要播放的音频范围 2、使用代码如下 <tem
js实现音频可视化波形图
xh888zw的博客
04-25 5534
js实现音频可视化波形图 效果如图：线条的颜色粗细也可以自己调整。 代码如下（可直接复制使用）： <html lang="en"> <head> <meta charset="UTF-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> bo
js音频可视化插件Wavesurfer.js
06-01
**Wavesurfer.js——JavaScript音频可视化神器** Wavesurfer.js是一款强大的JavaScript库，专为音频可视化设计，它利用了现代浏览器中的Web Audio API和HTML5 Canvas技术，能够将音频数据实时渲染成可视化的声波...
vue中音频wavesurfer.js的使用方法
10-15
总的来说，这个Vue组件使用wavesurfer.js实现了音频波形的绘制、播放控制和时间显示，提供了基本的音频操作功能。通过调整配置和事件处理，可以进一步扩展其功能，例如添加音量控制、时间滑块等交互特性。
wavesurfer.js, 在网络音频和画布上，建立可以导航波形.zip
10-10
wavesurfer.js, 在网络音频和画布上，建立可以导航波形 以下是如何更新到版本 2的 wavesurfer.js ！ 基于网络音频和画布的交互式可以导航。 请参见教程和示例在 wavesurfer-js.org 。浏览器支持wavesurfer.js 只适用...
waveplayer.js:具有波形视图的基于HTML5的音频播放器
05-02
waveplayer.js 具有波形视图的基于HTML5的音频播放器。 受和启发，但有所不同。 作者：Michael Dzjaparidze 执照：麻省理工学院 目录 waveplayer.js事件 浏览器支持和其他要求 经过测试， waveplayer.js可以在Chrome ， Firefox和Opera上运行（尚不支持Internet Explorer ）。 为了最大程度地减少波形绘制时间，有必要向JSON文件或以数字形式表示音频文件的波形的数据数组/对象提供URL。 提供JSON文件时，其名称应与相应的音频文件相同，并且应位于相同的位置。 如果此JSON文件不存在，并且没有将任何波形数据显式传递为load()函数的第二个参数，则将引发错误。 有许多工具可以从音频文件中提取JSON格式的波形数据。 例如，可以使用wav2json或py-wav2json 。 提供单个浮点值
js 选择一个音频文件，绘制音频的波形，从右向左逐渐前进。
唐诺
06-05 644
选择一个音频文件，绘制波形，从右向左逐渐前进。
js+canvas麦克风音浪波形图
weixin_72923430的博客
06-28 1416
自己看了好多资料才算写出来，但是还有很多地方不懂。有路过的大神帮忙看看哪里可以改进一下。
前端开发攻略---根据音频节奏实时绘制不断变化的波形图。深入剖析如何通过代码实现音频数据的可视化。
nibabaoo的博客
04-11 1713
利用HTML5和JavaScript实时绘制音频波形图的完整指南及技巧解析。深入剖析了通过代码实现音频数据可视化的方法，为开发者提供了详尽指导和实用技巧，以帮助我们打造更丰富、更引人入胜的音频应用体验。
在JavaScript中使用波形构建自定义音频播放器
寒冰屋的专栏
01-09 1251
此提示是关于一个简单的音频播放器，可用于浏览任何带有播放/暂停、停止选项和使用CanvasJS图表生成的波形的歌曲。
波形渲染神器：Wavesurfer.js
gitblog_00043的博客
05-09 1015
波形渲染神器：Wavesurfer.js 项目地址:https://gitcode.com/gh_mirrors/wa/wavesurfer.js Wavesurfer.js 是一款强大的交互式波形显示和音频播放库，专为提升网页音频体验而设计。它利用现代Web技术，提供了一种既美观又功能丰富的音频处理方式。 快速上手 只需几个简单步骤，即可开始使用： 安装 Wavesurfer.js： n...
html5音频文件生成波形图代码,WFPlayer.js 一个简单的音频波形图生成器
weixin_31222161的博客
06-05 1084
WFPlayer WFPlayer.js is an audio waveform generator DemoCheckout the demo from Github PagesFeaturesCreate waveforms without loading the entire media fileCustomize cursor, progress, grid, ruler disp...
基于wavesurfer.js 制作音乐播放器，支持音频标记，修改，播放时读取标记
weixin_43929450的博客
06-26 1254
至此，大致的功能基本实现了如需完整的demo,请联系1015095073@qq.com。
vue3项目wavesurfer.js插件安装绘制波形图以及时间轴插件的使用
最新发布
09-19
Vue3项目中引入和使用wavesurfer.js插件可以让你创建动态的音频波形图。以下是安装步骤及基本使用： 1. **安装 Wavesurfer.js**: 首先，在你的项目中安装wavesurfer.js。如果你使用npm，可以在`package.json`文件...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值