摇滚吧HTML5！有声前端交互！（Hello, Jsonic!）

　　软件工程师们摆弄1和0编写他们的乌托邦，音乐人门把玩12平均律上的音符构筑他们的伊甸园。最近，我偶然看了《蓝色骨头》这部电影，片中的男主角是位黑客，同时又兼具音乐创作的才华。在现实生活中，这虽非典型，但也不是特例，我身边便有一些摆弄0和1的朋友，略有情调地发烧着。

　　上一篇博文 摇滚吧HTML5！有声前端交互！（一） 中，我介绍了12平均律，引入了音高和时值，并谈及了其在Web Audio中的实现。按着这个节奏，连音成谱就有了曲子。借着这系列博文，我整理了下之前写的音频交互相关的Javascript框架，创作了jsonic.js。利用Jsonic.js可以实现音频可视化，语音识别，音频编码以及谱曲。本文便介绍如何利用Jsonic.js进行谱曲。

　　官网 http://jsonic.net

　　Jsonic的谱曲模块名为Melody，其中Note、MusicScore和Track3个类分别对应音符、乐谱和音轨的实现。具体说明文档请猛击API！

　　Note对象可以指定音符的唱名，时值（全音符，1/2音符，1/4音符……），音高所在字组（默认0，小字一组），是否有附点

var note = new Jsonic.Melody.Note(1,1/2,0,true);

　　MusicScore对象可以指定调式，和节拍。下面代码创建了一个E大调的，4/4拍的乐谱。

var musicSocre = new Jsonic.Melody.MusicScore('E','major','4/4');

　　通过改变musicScore的调式，可以方便的进行升降调，通过MusicScore的w方法可以向乐谱写入音符，在播放前需要调用complie方法。

musicSocre.w(new Jsonic.Melody.Note(3),new Jsonic.Melody.Note(4));

　　Track对象用来播放MusicScore对象，多个Track对象可以同时播放，和弦和声就可以利用同样的原理实现。

var track = new Jsonic.Melody.Track();

　　调用play方法播放乐谱，并且可以指定演奏的速度，参考前文所提及的时值的概念。

track.play(musicScore,90);

　　具体可以参考《直到世界尽头》的Demo, 请点击start开始播放,暴露童年了。。。Demo中还实现了对频域信号的可视化，以后会扩展出去。

　　前端是一个复合型职业，作文一篇，希望同好可以共同进步。

　　Giithub https://github.com/ArthusLiang/jsonic

　　转发请注明出处：http://www.cnblogs.com/Arthus/p/4218572.html

转载于:https://www.cnblogs.com/Arthus/p/4218572.html

摇滚吧HTML5！有声前端交互！（Hello, Jsonic!）相关推荐

摇滚吧HTML5！Jsonic超声波前端交互！
前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律.时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤.wifi.蓝牙.广播都 ...
前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
【自学系列一】HTML5大前端学习路线+视频教程（完整版）
今年,本公司全新发布了囊括Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我 ...
为什么要选择html5,5分钟告诉你，为什么要学HTML5大前端
互联网的掘起,让这世界再次被认知能力,5G.人工智能技术.数据分析.云计算技术等.凭着优秀的深度学习.数据处理方法技术性,人们已经以全新升级的层面在平行世界里思索,这一切最后都将在终端设备中完成. H ...
html5 判断分享,好程序员HTML5大前端分享之函数篇
好程序员HTML5大前端分享之函数篇,将代码编写在函数中,就可以避免在非必要情况下调用该代码,也就是说我们可以让一段代码在特定情况下再去执行. function 关键字:该关键字表示要声明一个函数. ...
html5网页制作代码_好程序员HTML5大前端常用开发工具大集合
好程序员HTML5大前端分享常用开发工具大集合HTML5作为当前最为流行的编程语言,广为适用.语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上.随着每一个新版本的发布,H ...
html5与python哪个好_3个原因告诉你，为什么选择HTML5大前端？
随着当下IT技术的蓬勃发展,越来越多的年轻人想入行或转行至"程序员"梯队. 那么对于零基础的小伙伴来说,综合各方面原因考量,小千首推大家选择HTML5大前端.下面为大家分析原因,希 ...
IT入门？推荐首选学习HTML5大前端
随着当下IT技术的蓬勃发展,越来越多的人想入行或转行至"程序员"梯队.对于零基础的小伙伴来说,综合各方面原因考量,. HTML5到底是什么?HTML5是指第5代HTML(超文本标记 ...
3个原因告诉你，为什么选择HTML5大前端？
随着当下IT技术的蓬勃发展,越来越多的年轻人想入行或转行至"程序员"梯队. 那么对于零基础的小伙伴来说,综合各方面原因考量,小千首推大家选择HTML5大前端.下面为大家分析原因,希 ...
AE导出JSON数据用CSS做前端交互---kalrry
AE导出JSON数据用CSS做前端交互---kalrry 一.简介二.准备三.例子四.参考一.简介关于网页端动画实现 web端做动画有多种形式,可以用CSS的animation,也可以用Ca ...

摇滚吧HTML5！有声前端交互！（Hello, Jsonic!）

摇滚吧HTML5！有声前端交互！（Hello, Jsonic!）相关推荐

最新文章

热门文章