Wavesurfer.js绘制波形图

2023-12-23 06:12
文章标签 js 绘制 波形图 wavesurfer

本文主要是介绍Wavesurfer.js绘制波形图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML使用Wavesurfer.js

要使用wavesurfer.js,首先需要在HTML文件中引入Wavesurfer.js库,然后创建一个音频元素并将其添加到页面中。接下来,初始化Wavesurfer实例并配置相关选项。以下是一个简单的示例:

  1. 在HTML文件中引入Wavesurfer.js库:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Wavesurfer.js 示例</title><!-- 引入Wavesurfer.js库 --><script src="https://unpkg.com/wavesurfer.js"></script>
    </head>
    <body><!-- 创建一个音频元素 --><audio id="audio" src="your-audio-file.mp3"></audio><!-- 创建一个用于显示波形的容器 --><div id="waveform"></div><script>// 获取音频元素和容器元素var audio = document.getElementById('audio');var waveform = document.getElementById('waveform');// 初始化Wavesurfer实例var wavesurfer = WaveSurfer.create({container: '#waveform', // 指定波形容器的IDwaveColor: 'violet', // 设置波形颜色progressColor: 'purple' // 设置进度条颜色});// 当音频文件加载完成后,开始播放并绘制波形audio.addEventListener('canplaythrough', function () {wavesurfer.load(audio);wavesurfer.play();});</script>
    </body>
    </html>
    
  2. your-audio-file.mp3替换为你要使用的音频文件路径。

  3. 打开浏览器,查看效果。

 Vue项目中使用Wavesurfer.js

  1. 打开终端或命令提示符。
  2. 使用cd命令导航到Vue项目的根目录。
  3. 运行以下命令来安装wavesurfer.js:
    
npm install wavesurfer.js --save

4. 在Vue组件中引入并使用wavesurfer.js。例如,在components/YourComponent.vue文件中:

<template><div><!-- 在这里添加你的代码 --></div>
</template><script>
import WaveSurfer from 'wavesurfer.js';export default {name: 'YourComponent',mounted() {this.initWavesurfer();},methods: {initWavesurfer() {const waveform = document.getElementById('waveform');this.wavesurfer = WaveSurfer.create({container: waveform,waveColor: 'violet',progressColor: 'purple'});this.wavesurfer.load(this.audio);this.wavesurfer.play();}}
};
</script>

5.确保在HTML文件中有一个用于显示波形的容器,例如:

<div id="waveform"></div>

 6.将音频文件添加到Vue组件的data属性中,例如:

data() {return {audio: 'your-audio-file.mp3'};
}

现在,当你运行Vue项目时,wavesurfer.js应该已经成功下载并在页面上显示波形。

案例一

<template><div style="padding: 30px"><div ref="waveform_Ref"></div><div style="padding: 30px"><el-buttontype="primary"size="small"icon="el-icon-video-play"@click="playMusic"v-if="!playing">播放 </el-button><el-buttonv-if="playing"type="primary"size="small"icon="el-icon-video-pause"@click="playMusic">暂停</el-button></div></div>
</template><script>
import WaveSurfer from "wavesurfer.js";export default {data() {return {wavesurfer: null,playing: false,};},mounted() {this.$nextTick(() => {this.wavesurfer = WaveSurfer.create({// 波形图的容器container: this.$refs.waveform_Ref,// 已播放波形的颜色// progressColor: "red",// 未播放波形的颜色// waveColor: "lightgrey",// 波形图的高度,单位为px// height: 10,// 是否显示滚动条,默认为false// scrollParent: true,// 波形的振幅(高度),默认为1// barHeight: 0.8,// 波形条的圆角// barRadius: 2,// 波形条的宽度// barWidth: 1,// 波形条间的间距// barGap: 3// 播放进度光标条的颜色// cursorColor: "red",// 播放进度光标条的宽度,默认为1// cursorWidth: 10,// 播放进度颜色// progressColor: "blue",//  波形容器的背景颜色// backgroundColor: "yellow",// 音频的播放速度// audioRate: "1",// (与区域插件一起使用)启用所选区域的循环// loopSelection:false});const audioFile = require("../assets/03.mp4");this.wavesurfer.load(audioFile);});},methods: {playMusic() {this.wavesurfer.playPause.bind(this.wavesurfer)();this.playing = !this.playing;},},
};
</script>
<style scoped>
</style>

案例二

<template><div class="mixin-components-container"><el-row><el-card class="box-card" style="text-align: left"><div id="waveform" ref="waveform"><!-- Here be the waveform --></div><div id="wave-timeline" ref="wave-timeline"><!--时间轴 --></div><div class="buttonBox"><el-button type="primary" @click="rew">后退</el-button><el-button type="primary" @click="plays"><i class="el-icon-video-play"></i>播放 /<i class="el-icon-video-pausee"></i>暂停</el-button><el-button type="primary" @click="speek">前进</el-button><el-button type="primary" @click="replay">重放</el-button><el-tooltipclass="item"effect="dark"content="指定播放"placement="bottom"><el-popover placement="top" width="200" trigger="click"><el-inputv-model="appointTime"placeholder="请输入内容"class="input-with-select"><el-button slot="append" @click="appointPlay">播放</el-button></el-input><el-button slot="reference" circle> 指定播放 </el-button></el-popover></el-tooltip><spanstyle="border: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px;"/><el-tooltipclass="item"effect="dark"content="音量"placement="bottom"><el-popoverplacement="top-start"trigger="click"style="min-width: 38px; margin-left: 10px"><div class="block" style="width: 42px"><el-sliderv-model="value"verticalheight="100px"@change="setVolume"/></div><el-button slot="reference" circle> 音量 </el-button></el-popover></el-tooltip><el-tooltipclass="item"effect="dark"content="播放倍速"placement="bottom"><el-popoverplacement="top"width="220"trigger="click"style="margin-left: 10px"><el-input-numberv-model="ds"width="180":precision="2":step="0.1":min="0.5":max="2"@change="DoubleSpeed"/><el-button slot="reference" round>{{ ds + " X" }}</el-button></el-popover></el-tooltip></div></el-card></el-row></div>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
// import CursorPlugin from "wavesurfer.js/dist/plugins/wavesurfer.cursor.js";
import Timeline from "wavesurfer.js/dist/plugins/timeline.js";
export default {// name: "Details",// components: { MyWaveSurfer },data() {return {wavesurfer: null,// 指定播放功能的播放时间点appointTime: 1,// 播放倍速ds: 1.0,// 设置音量value: 0,};},mounted() {this.$nextTick(() => {console.log(WaveSurfer);this.wavesurfer = WaveSurfer.create({// 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。container: this.$refs.waveform,// 光标的填充颜色,指示播放头的位置。cursorColor: "red",// 更改波形容器的背景颜色。backgroundColor: "gray",// 光标后的波形填充颜色。waveColor: "violet",// 光标后面的波形部分的填充色。当progressColor和waveColor相同时,完全不渲染进度波progressColor: "purple",backend: "MediaElement",// 音频播放时间轴mediaControls: false,// 播放音频的速度audioRate: "1",// 插件:此教程配置了光标插件和时间轴插件plugins: [// 光标插件// CursorPlugin.create({//   showTime: true,//   opacity: 1,//   customShowTimeStyle: {//     "background-color": "#000",//     color: "#fff",//     padding: "2px",//     "font-size": "10px",//   },// }),// 时间轴插件Timeline.create({container: "#wave-timeline",}),],});this.wavesurfer.on("error", function (e) {console.warn(e);});this.wavesurfer.load(require("../assets/03.mp4"));});},methods: {// 播放时暂停,播放时暂停plays() {this.wavesurfer.playPause();},// 后退,rew() {this.wavesurfer.skip(-3);},// 前进,speek() {this.wavesurfer.skip(3);},// 重放replay() {this.wavesurfer.stop();},// 设置音量:setVolume(val) {this.wavesurfer.setVolume(val / 100);},// 指定播放appointPlay() {this.wavesurfer.play([this.appointTime]);},},
};
</script>
<style scoped>
.mixin-components-container {background-color: #f0f2f5;padding: 30px;min-height: calc(100vh - 84px);box-sizing: border-box;
}
.buttonBox {margin-top: 20px;display: flex;justify-content: center;
}
</style>

 我没找到wavesurfer.cursor.js文件,就注释了

参考

Wavesurfer.js 生成音浪波形图(vue) - 简书

vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】_朝阳39的技术博客_51CTO博客

这篇关于Wavesurfer.js绘制波形图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/526994

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

利用matlab bar函数绘制较为复杂的柱状图,并在图中进行适当标注

示例代码和结果如下:小疑问:如何自动选择合适的坐标位置对柱状图的数值大小进行标注?😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'