最近浏览之前翻译的github优秀资源集合的时候发现了一个非常有意思的音乐创作教学网站。该网站由Ableton公司制作，旨在为音乐创作感兴趣的同学提供一个简单易学的在线教学网站,今天给大家简单的介绍一下该网站的使用方法和其本身使用的技术栈。
网站地址使用打开如上链接后先进入到介绍页面，介绍该网站的主要内容。因该网站基于H5开发，pc和移动端都可直接打开。以下是PC截图，如果你是用手机打开的展示界面不一样但是操作区别不大，跟着网站的介绍走就行另。点击左侧导航,会显示完整的教程目录,总共有两级目录可以清楚的看到教程的所有内容。也可以滚动页面到下方，每个页面都会有下一章节的内容。例如进入教程第一节，鼓的创作。进入会有默认的节奏音符，点击如下标红按钮即可开始演奏。可以按教程提示的点击小方格改变删除音符。然后再点击查看自己创作的节奏。该网站每一个章节都有具体的提示讲解，对着操作即可及其简单,半天之内就可以学会制作一些简单的音乐节奏。当然该项目主要是教学使用，真正的制作还需要导入该公司的安装版使用Ableton Live ，这里就不在深入了，具体怎么弄有兴趣的小伙伴可以研究研究。使用技术栈该网站的核心音频库使用tone.js，其他的相关的第三方库有d3,loadsh,imgix,microevent,pollyfills等。
tone.js 地址
总结有音乐梦的小伙伴们可以尝试尝试，没有搞过音乐的人打开这个网站的，玩起来还是相当有趣的。另外有技术追求的同学也可以使用tone.js试着做一下类似的音频功能。最后在分享下最开始提到的github资源集合的地: 有很多程序员有用的项目资源欢迎大家star哈。
以上内容如有对您有所帮助，欢迎关注、转发、收藏、评论。有任何问题或者建议也欢迎随时反馈，大家一起交流沟通，后续会提供更多优质的内容给到各位爱好技术的伙伴，谢谢！
#前端##H5##开发##程序员#
[得意]各种H5页面在营销、邀请函、招聘宣讲等场合出现已经司空见惯了，对此有兴趣想自己制作的朋友，可以看看这期文章[加油]
?[酷]今天给大家分享几个H5的学习欣赏和制作网站。干货来袭~记得收藏~点赞哦！
--------------------------------------------------------------------------------------------------------------
学习鉴赏：
1??H5案例分享(H5案例分享 - 创意H5案例，一搜即得)
2??未来应用
3??H5创意汇(H5案例 - H5创意汇,最全的H5创意分享平台，H5案例大全)
4??人人秀(人人秀干货分享|H5教程|h5页面制作工具)
5??爱果果(爱果果 - 酷站,H5,UI,网页模板、素材免费下载,案例欣赏)
H5制作：
1??意派(意派?Epub360-专业H5页面在线交互设计制作工具，H5流式页面，微信邀请函制作软件)
2??ih5(iH5专业的H5制作工具)
3??易企秀(H5电子邀请函模板_海报制作模板_图片设计_表单问卷免费制作-易企秀)
#干货# #H5#
做H5没有那么难，很多软件都有模板，直接套用就行，H5对文案要求有点高，你得学会精炼文字，另外H5 包含策划功能，你得懂先做什么后做什么，还有一点，你得对音乐有识别度，好音乐也是H5的亮点，总之，H5简单易学，但特别考验一个人的综合能力，多做几个，找到经验就好了。