wavesurfer.js使用指南_JS 音频可视化插件

wavesurfer.js使用指南

官方网址:https://wavesurfer-js.org

wavesurfer.js使用指南_JS 音频可视化插件

GitHub:https://github.com/katspaugh/wavesurfer.js

简介描述:JS 音频可视化插件

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件 。Wavesurfer.js用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波。

利用 wavesurfer.js 你可以创建漂亮的 HTML5 音乐播放器或一个复杂的DJ应用。

使用方法

选择一个容器:

<divid="waveform"></div>

创建一个实例,通过容器的选择选项:

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});

订阅一些事件:

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

从一个URL加载音频文件:

wavesurfer.load('example/media/demo.wav');


options参数说明:

参数默认值说明
audioRate1音频的播放速度,数值越小越慢
barWidthnone如果设置,波纹的样式将变成类似柱状图的形状
barHeight1波纹柱状图的高度,当大于1的时候,将增加设置的高度
barGapnone波纹柱状图之间的间距
containernone必填参数,指定渲染的dom的id名、类名或者dom本身
cursorColornone鼠标点击的颜色
cursorWidth1鼠标点击显示的宽度
height128音频的显示高度
hideScrollbarfalse当出现横坐标的时候,设置是否显示
mediaTypeaudio音频的类型,支持video
plugins[]使用的插件
progressColor#555光标后面的波形部分的填充颜色
waveColor#555光标后面的波形的填充颜色
xhr{}额外的请求XHR参数
海计划公众号
(0)
上一篇 2020/03/06 09:13
下一篇 2020/03/06 09:13

您可能感兴趣的内容

  • AniJS基础知识入门_ 一个基于Css3动画的声明处理库

    AniJS基础知识入门 官方网址:http://anijs.github.io/ GitHub:https://github.com/anijs/anijs 简介描述: 一个基于C…

    2020/03/06
  • ES6的标准内置对象Proxy入门基础_Proxy小白指南

    Proxy是ES6规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过Proxy可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。const originalObj = {name: ‘xialei’
    };
    const publicObj = new Proxy(originalObj, {set(

    2020/03/23
  • Js实现动画缓存效果入门攻略_动画基础入门

    Js实现动画缓存效果代码如下:
    /**
    @description: 动画缓存 函数
    @param {string} targetId – 要移动的目标元素 id
    @param {number} targetPosition – 要移动的目标位置
    @param {number} frequency – 每次移动的频率
    */
    function m

    2020/03/29
  • 我来聊聊面向模板的前端开发基础入门_模板使用说明

    在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己、发展爱好、陪伴家人,工作、生活两不误。提升效率的途径,无外乎就是「方法」和「工具」。以一个开发者的思维来想,就是将工作内容进行总结、归纳,从一组相似的工作内容中提炼共同点,

    2020/03/24
  • Js BOM之window核心模块小白基础_bom基础教程

    Window对象包含以下五大核心:document,screen,navigator,history,location。 一 document 文档 document包含了浏览器对标准DOM实现的所有方法和属性。1,BOM和DOM的关系大致如下图: 二 screen window.screen包含了用户屏幕的相关信息,比较有用的有四个属性,他们

    2020/03/26
  • 区块链挖矿原来是这么一回事入门基础教程_区块链入门攻略

    在整个数字货币领域,很多人都知道挖矿,然而,有些人认为挖矿很赚钱,也有人认为挖矿就是个坑。但是对于挖矿而言,其本质是一种加密的计算。什么是挖矿?简单说,挖矿其实就是数字货币发行的一个过程,通过区块链技术对链上数据进行记录,然后进行广播从而获得奖励,那么这个奖励就是新发行的数字货币。目前,数字货币的发行主要分为两种: 一种是通过计算机运行特定的算法争夺记账权益

    2020/03/23
  • 移动端小程序框架面面观基础入门_框架小白常识

    一 小程序兴起的背景小程序兴起的背景可以分为行业背景和技术背景。1. 行业背景:与移动互联网成熟、流量红利终结伴随的是 App 的巨型化、寡头化,流量成本越来越高昂,这几点其实大家平时也有体会——手机里装了多少 App,其中,多少 App 装了之后基本没使用过,占据用户大部分时间的 App 越来越集中在 3—5 款。这种趋势普通用户都能深刻的感觉到,巨头们的

    2020/03/29
  • 关于Data URLs svg图片显示出错和浏览器URL hash #使用指南_svg小白基础

    在使用生成的svg图作为标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在中,Data URLs格式与显示情况如下://1. 部分浏览器不能正常显示
    data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" hei

    2020/03/30
  • gulp基础入门教程_帮助你预处理 CSS,JS压缩,transpiling 和 live reloading

    gulp基础入门 官方网址:https://gulpjs.com/ GitHub:https://github.com/gulpjs/gulp 简介描述:帮助你预处理 CSS,JS…

    2020/03/05
  • React中编写CSS的姿势基础知识教程_react菜鸟教程网

    在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《 React中CSS Modules的使用 》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上,使用CSS Modul

    2020/03/26
  • javascript应该怎么学?指南攻略_学习指南攻略

    有朋友说想要一个学习javascript,但是不知道怎么去学习。本篇文章中小编总结了JavaScript重要知识点以及学习方法,有点长,但是很好用,希望对你有所帮助。一、开发环境和JavaScript版本问题开发环境越简单越好,一定不要在这个环节浪费时间。首先说编辑器的选择,sublime text、vs code、atom、webstorm,还有HBuil

    2020/03/20
  • vue-good-table使用教程_简洁的 Vue.js 数据表格组件

    vue-good-table使用教程 官方网址:https://xaksis.github.io/vue-good-table/ GitHub:https://github.com…

    2020/03/06
  • 关于ajax请求数据,并将数据赋值给全局变量的一些解决方法使用说明_ajax攻略教程

    在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只能用其他方法来解决,下来是解决的方法第一个解决方法没有使用全局变量,直接在ajax请求中将请求到的数据赋值给需要的地方 第二个方法是将请求到的数据,通过方法传参

    2020/03/30
  • libpku基础知识入门_贵校课程资料民间整理

    libpku基础知识入门 官方网址:https://lib-pku.github.io/ GitHub:https://github.com/lib-pku/libpku 简介描述…

    2020/03/06
  • 现在最不缺的应该就是码农了,缺的是技术过硬又精通业务的工程师攻略教程_码农使用指南

    昨天,一位分析界的老前辈对我很无奈地摇摇头,“这帮程序员,不食人间烟火哪!”我也深有感触,全世界的码农都一个鸟样。这让我想起了,同样也是他,在多年之前,对我提了警醒——要重视业务。从那之后,我一直狂奔在技术+业务的双修道路上。
    放在以前,码农这个族群一定是稀罕动物。但在今天,这个世界最不缺的应该就是码农了,未来最廉价的也将是码农。
    仅有泛泛一技,在未来并不

    2020/03/30
  • 程序员该怎样和老板谈论升职加薪?小白攻略_职场教程视频

    当你忙于工作时,就很容易陷入满足于现状的心态,接受当前的一切。事实上,没有人会永远是一个程序员。即便是有些工作了二三十年的程序员,随着职业技能的发展,他们也在不同的公司间跳槽。即使是在同一家公司,这些经验丰富的程序员也会在他们的职业生涯中稳步上升。程序员可能是现在为数不多的,在职场上会考核你的专业硬技能的职业之一了。在全球化的当下,这其实是一件好事。尤其是房

    2020/03/23