纯js带音符显示功能的网页电子琴插件

Beep是一款功能非常强大的基于浏览器的电子琴js插件。该电子琴插件可以在发音的同时显示出该声音的音符，并且自带演示功能，可以播放指定曲子的完整音乐。该电子琴插件支持键盘演奏和使用鼠标滑过琴键的方式演奏。

Beep是基于WebAudio API来创建合成音乐效果的电子琴javascript框架。它用于模拟真实的钢琴演奏环境。使用一行代码synth = new BEEP.Instrument()就可以创建一组触发音符的Trigger接口，每个接口的音符Notes都有自己的音调Voices。使用synth.scorePlay()方法，可以使该电子琴插件自动进行演奏默认的曲子。

效果演示：http://www.htmleaf.com/Demo/201504071642.html

下载地址：http://www.htmleaf.com/jQuery/Layout-Interface/201504071641.html

时间： 2024-07-30 09:14:16

纯js带音符显示功能的网页电子琴插件的相关文章

（纯js）如何不刷新网页就能链接新的js文件

如何不刷新网页就能链接新的js文件,其实在HTML语言中已经有相关的函数了,就是再添加一个<script src=.....></script>. 函数很简单,叫document.body.appendChild(script); 使用方法如下 <!DOCTYPE html><html><head><meta charset="utf-8"> <script language="javascript

基于jquery的带事件显示功能的日历板插件calendar.js

项目中需要用到一个日历板控件,要求能显示事件,于是想到了一年前在app项目上写的一个粗略版日历板,然后又想着这个可能以后还会用 于是我就封装了一下,能满足基本要求,如果有需要更多功能的也可以自行修改源码,源码未压缩未代码混淆且有注释. 封装的是基础版,仅能展示一般日历板功能和正常显示事件数据. 再往后就涉及到项目的业务了,就不便展示了. 以下为地址: https://gitee.com/mluckydog/canlender 原文地址:https://www.cnblogs.com/syll/p

纯js实用DOM元素放大缩小特效插件

Zoomerang.js是一款非常实用的HTML DOM元素放大缩小js特效插件.它可以将页面上的任何元素进行放大缩小.当某个元素处于Zoomerang的监听状态时,点击该元素可以将它放大到屏幕的中间,再次点击它又会回到原来的位置. 使用注意事项: 该元素放大缩小效果依赖于CSS Transform(IE浏览器至少要IE10才能支持) 在固定尺寸的元素上效果最佳:display: block.display: inline-block和img. 避免在很长的文本段上使用. 在mobile上使用时

轻量级 web 文件上传组件，纯js，html5、html4智能适配，支持上传进度显示（IE10+、标准浏览器）

老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能

[分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localstore,demo见http://xueduany.github.io/localstore/,下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage

Ajax，纯Js+Jquery

AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过XmlHttpRequest访问页面纯js版---------- if(XmlHttpRequest){ //判断是否支持XmlHttpRequest xhr= new XmlHttpRequest(); // 创建XmlHttpRequest对象 } else{ xhr= new Activexob

纯JS实现省市区三级联动

<!DOCTYPE html><html><head>    <title>纯JS省市区联动</title>    <script type="text/javascript" src="jsAddress.js"></script></head><body><div> 省:<select id="cmbProvince"

IT技术学习指导之Linux系统入门的4个阶段（纯干货带图）

IT技术学习指导之Linux系统入门的4个阶段(纯干货带图) 全世界60%的人都在使用Linux.几乎没有人没有受到Linux系统的"恩惠",我们享受的大量服务(包括网页服务.聊天服务等)背后几乎都是由Linux系统支撑的服务器,超过20亿人每天都随身携带基于Linux内核开发的 Android手机出门,Linux也广泛应用在嵌入式系统上.因此学习Linux系统变得尤为重要,对于普通用户而言,平面式的学习Linux系统的基本使用已经足够,但对于开发者或者运维人员而言,深入学习Linux

初探JavaScript（三）——JS带我碰壁带我飞

已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScript Dom 编程艺术>(ps:看过书评,网友对其褒贬不一,个人感觉还是不错的,适合初学者.不是每本书都能得到所有读者的认可,只能让部分适合的读者对其称赞,而我,就是其中一个). 前面介绍了JavaScript的一些常用方法,如何与DOM.HTML配合完成一些交互.今天主要介绍JavaScript在动画效