欢迎大家来到IT世界,在知识的湖畔探索吧!

最近浏览之前翻译的github优秀资源集合的时候发现了一个非常有意思的音乐创作教学网站。该网站由Ableton公司制作，旨在为音乐创作感兴趣的同学提供一个简单易学的在线教学网站,今天给大家简单的介绍一下该网站的使用方法和其本身使用的技术栈。

网站地址

https://learningmusic.ableton.com/zh/index.html

使用

1. 打开如上链接后先进入到介绍页面，介绍该网站的主要内容。因该网站基于H5开发，pc和移动端都可直接打开。以下是PC截图，如果你是用手机打开的展示界面不一样但是操作区别不大，跟着网站的介绍走就行另。

1. 点击左侧导航,会显示完整的教程目录,总共有两级目录可以清楚的看到教程的所有内容。也可以滚动页面到下方，每个页面都会有下一章节的内容。

1. 例如进入教程第一节，鼓的创作。进入会有默认的节奏音符，点击如下标红按钮即可开始演奏。可以按教程提示的点击小方格改变删除音符。然后再点击查看自己创作的节奏。

1. 该网站每一个章节都有具体的提示讲解，对着操作即可及其简单,半天之内就可以学会制作一些简单的音乐节奏。当然该项目主要是教学使用，真正的制作还需要导入该公司的安装版使用Ableton Live ，这里就不在深入了，具体怎么弄有兴趣的小伙伴可以研究研究。

使用技术栈

该网站的核心音频库使用tone.js，其他的相关的第三方库有d3,loadsh,imgix,microevent,pollyfills等。

tone.js 地址 https://github.com/Tonejs/Tone.js

总结

有音乐梦的小伙伴们可以尝试尝试，没有搞过音乐的人打开这个网站的，玩起来还是相当有趣的。另外有技术追求的同学也可以使用tone.js试着做一下类似的音频功能。最后在分享下最开始提到的github资源集合的地: https://github.com/gamedilong/awesome-cn 有很多程序员有用的项目资源欢迎大家star哈。

以上内容如有对您有所帮助，欢迎关注、转发、收藏、评论。有任何问题或者建议也欢迎随时反馈，大家一起交流沟通，后续会提供更多优质的内容给到各位爱好技术的伙伴，谢谢！

#前端##H5##开发##程序员#