模拟制作网易云音乐(AudioContext)
记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩。由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一遍,然后参照官网的API模拟做了一款网易播放器。没有什么创新的点,只是想到了就想做一下而已。
效果可以看这里:http://music.poemghost.com/,如果看不了,说明博主的服务器已经不在工作啦。(建议使用电脑浏览器打开,同时切换到手机模式来打开,因为在手机上测试时有问题,而且有很大性能损耗,经常会导致浏览器奔溃)
代码在这里:github
效果图一览:
看着自己洋洋洒洒写了快1000多行的js
,我现在心里也是一万屁草泥马飘过。当然其中还有很多代码没有经过提炼,很多变量可以公用,用对象化的方式来说写这个会更有条理,这个博主以后有时间再梳理一遍。下面来讲讲主要的实现过程。
一、整体思路
API
可以到https://webaudio.github.io/web-audio-api/#dom-audiobuffersourcenode上面去看,只是一个草案,并没有纳入标准,所以有些地方还是有问题,在下面我会说到我遇到了什么问题。但是这个草案上的东西其实可以做出很多其他的效果。比如多音频源来达到混音效果、音频振荡器效果等等…
整体的思路图如下:
大致上来说就是通过window
上的AudioContext
方法来创建一个音频对象,然后连接上数据,分析器和音量控制。最后通过BufferSourceNode
的start
方法来启动音频。
二、具体分析
2.1 路由
routes/index.js
router.get('/', function(req, res, next) {
fs.readdir(media, function(err, names) {
var first = names[0];
// 如果第一个文件不是mp3文件,说明是MAC系统
if (first.indexOf('mp3') === -1) {
first = names[1];
names = names.slice(1);
}
var song = first.split(' - '<