摇滚吧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

时间: 2024-12-26 10:07:00

摇滚吧HTML5!有声前端交互!(Hello, Jsonic!)的相关文章

摇滚吧HTML5!有声前端交互!(一)

生命的伊始,婴儿用明亮的哭声宣告一个新生命的诞生,睁开双眼之前,一双小耳朵已经开始聆听这个世界.在如今的用户体验领域,几乎所有公司都会有视觉设计师,却鲜有注重听觉交互的公司.随着各大厂商对HTML5支持的日渐完善,前端工程师其实早已可以摆弄各种音波,让复合型开发走得更远. 声波是一种机械波,通过波的物理属性我们可以做很多事情.比如,利用声波的频率编码进行数据传递,分析频域或者时域的数据进行可视化应用,或者结合光波的特性做些视听联动.通过HTML5中的Web Auido规范,以上所有都能实现.我在

摇滚吧HTML5!Jsonic超声波前端交互!

前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律.时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤.wifi.蓝牙.广播都有波的身影,可以说机械波桥接了信息时代.Jsonic作为前端的音频交互框架,也有利用声波进行数据传输的接口,在介绍API之前,先分享一些web audio原生编码的干货. 读了这系列前两篇博文摇滚吧HTML5!有声前端交互!(一)和摇滚吧HTML5!有声前端交互!(Hello, Jsonic!)的同

前端交互开发微体验--总结了一些国内外炫酷的网站

前端交互开发微体验 关于首屏灵动小效果,微交互提升页面生机: 一.关于首屏视频播放 http://designmodo.com/startup/ 感官体验:科技感,高大上,酷 综合评价:如页面请求不多且视频占空小的情况下使用.一般为首屏轮播图的情况下使用,前两张轮播为图片,最后为视频,多给视频一些加载时间.还有就是非首屏使用. 推荐指数:★★★☆☆     二.Hover时实现图片随着鼠标方向而变动 http://atieva.com/ https://labs.invisionapp.com/

html5 canvas 前端生成缩略图

html5 canvas 前端生成缩略图 更新: 2013/08/01: 解决了后面遇到的bug: 图片被压扁(IOS6); 图片被旋转; 整个源码放在: https://github.com/kairyou/html5-make-thumb 新方案需要后面实现的, 就是下面的旧版本里的功能(水印/是否强制拉伸以适应目标尺寸等功能). w3ctech长沙站交流会, 里面分享的PPT: http://www.slideshare.net/99leon/html5-create-thumbnail

[转载]HTML5游戏前端开发秘籍

http://isux.tencent.com/html5-game-development-cheats.html 转载至腾讯ISUX HTML5游戏前端开发秘籍 本文由米随随编写 QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏,虽然还有很多不足,但其中使用的一些技术与技巧还是很有必要为大家分享出来,方便大家用秘籍打通各种关卡创造出更多更好的HTML5游戏.(本秘籍主要讲述使用HTML + CSS技术方面) 一.自适应 Android手

@java--liang 这是一款HTML5的前端视频Jquery组件,里面有41个播放器Demo。

原文:@java--liang 这是一款HTML5的前端视频Jquery组件,里面有41个播放器Demo. 源代码下载地址:http://www.zuidaima.com/share/1550463527406592.htm 支持播放格式:MP3,M4A / M4V,OGA / OGV,WEBMA / WEBMV,WAV,FLA / FLV,RTMPA / RTMPV 如果有使用上的不明白的可以QQ交流,或者留言给我,第一时间回复. 早上看到你的留言,希望能帮你度过这个星期,不至于完蛋,@jav

HTML5+CSS3前端开发资源整合

HTML5+CSS3前端开发资源整合 推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <meta name="format-detection" c

了解php数据转json格式与前端交互基础

php数据转json格式与前端交互 ArryJson1.php <?php $test=array(); $word=array("我12","要43","把23","你65","们7","全87","都","吃","掉79","嗯78","啊09","蒙67",

HTML5 indexedDB前端本地存储数据库实例教程 (转载)

一.indexedDB为何替代了Web SQL Database? 跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样,在前端领域,也不是哪来先出来哪个就在日后引领风骚的. HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Database数据库要出来的更早,然并卵.从2010年11月18日W3C宣布舍弃Web SQL database草案开始,就已经注定Web SQL Database数据库是明日黄花. 未来一定是indexedDB的,从