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"

    />

  • {{ speed[index] + " X" }}

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();

},

},

};

#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;

}

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

html5添加音波波形图,wavesurfer.js绘制音频波形图的实现相关推荐

  1. vue 绘制波形图 wavesurfer.js （音频/视频） 【实用教程】

    安装 wavesurfer.js cnpm i wavesurfer.js --save 无 cnpm 的先运行 npm i cnpm -g 全局安装 cnpm 绘制音频波形图 常用的配置参数详见注释 ...

  2. Wavesurfer.js 生成音频波形图

    Wavesurfer.js 生成音浪波形图 (vue) 代码如下,可直接复制 <template><div class="mixin-components-containe ...

  3. C# 参考 cool edit 样式, 绘制音频波形图

    由于项目需要音频波形显示,所以仿照 Cool Edit 实现一个简易的音频播放器. 部分代码参考:GitHub - naudio/NAudio.WaveFormRenderer: Simple uti ...

  4. html5音频文件生成波形图代码,使用wavesurfer.js显示mp3 audio音频的波形图

    by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...

  5. html5音频插件js,wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件

    通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作,包括 Firefox, Chrome, Safari, Mobile S ...

  6. js实现音频可视化波形图

    js实现音频可视化波形图 效果如图:线条的颜色粗细也可以自己调整. 代码如下(可直接复制使用): <html lang="en"><head><met ...

  7. html5无法绘制线条,Html5画布 - 使用fabric.js绘制完美线条或不使用

    我正在创建一个游戏,我需要在不同类型的屏幕分辨率和缩放下实现HTML5上的完美画布线.Html5画布 - 使用fabric.js绘制完美线条或不使用 很容易理解我说的,简单地粘贴在两个不同的代码转换成 ...

  8. vue+elementUI使用Wavesurfer.js音频可视化

    vue+elementUI使用Wavesurfer.js音频可视化 效果图 安装 wavesurfer.js npm install wavesurfer.js --save (datav安装) np ...

  9. html添加花瓣,JS绘制生成花瓣效果的方法

    本文实例讲述了JS绘制生成花瓣效果的方法.分享给大家供大家参考.具体如下: 这里使用JS绘制生成花瓣效果,纯JS生成的图形绘制效果,想研究一下JavaScript图形绘画方面知识的,不妨参考一下这个小 ...

  10. 声纹图-声谱图-js之wavesurfer.js（配置、事件、方法中文版翻译）

    配置信息 option type default English description translate audioRate float 1 Speed at which to play audi ...

最新文章

  1. Django框架之DRF 基于mixins来封装的视图
  2. php中如何让这段东西不显示出来,数据显示处理,该怎么处理
  3. ant design中的栅格化系统
  4. Windows常用命令行命令
  5. ubuntu 20.04 阿里源_Ubuntu 18.04 安装CUDA 更新内核源出错解决方案
  6. GUI编程tkinter模块常用参数(python3)
  7. 最近很火的人生重开模拟器HTML网页源码
  8. python logger_牛逼！python中的logging模块居然这么好用！
  9. 系统动力学仿真软件Vensim下载
  10. 不谋一时不足以谋一域_“不谋万世者,不足谋一时。不谋全局者,不足谋一隅”出自哪里？是什么意思？...
  11. 电脑WLAN/WIFI搜索不到网络
  12. vue中缓存当前路由的实现
  13. MyBatis 同时执行多条语句【简单扼要】
  14. 来谈一谈专注力的真相
  15. 【民间文学论文】《苗族古歌》中的浪漫主义和物我互渗艺术思想（节选）
  16. 学校食堂简易点餐管理系统(含用户登录且密码隐藏)C++
  17. 【深入理解Hadoop原理】Hadoop 参数配置 详解
  18. 看完这篇Linux基本的操作你就会了
  19. 搭建属于自己的数字IC EDA环境（五）：搭建FPGA自动化环境（Linux下vivado Tcl脚本自动化开发），业余IC设计流程与通路
  20. 斯坦福大学计算机视觉课程cs231n——第一课：课程介绍 计算机视觉概述

热门文章

  1. maven自带clean_maven install、maven clean、project clean
  2. web网站添加ico图标
  3. vba批量合并指定的sheet_利用VBA实现多个Excel工作簿快速合并方法
  4. 5个促进 OKR 成功的文化准则
  5. python 语音识别 中文_python中文语音识别
  6. docker---dockerfile 编写优化
  7. 【落谷1957】口算练习题题解
  8. linux系统安装全局翻译,CentOS 6.4下安装翻译软件StarDict
  9. 【公告】CSDN 博客将进行数据库维护
  10. 国外开放的硕博论文、期刊、数据库下载网站