博客频谱音乐播放器插件测试中
想写这个播放器插件很久了,但是一直没有找到实现音乐频谱的方法,所以一直没有动手。直到最近看到了 HTML5 Audio API 的一些文章,其中有一篇文章详细的讲解了这个技术,并且还提供了一个音乐频谱demo。如获至宝,这不就是我一直想要的效果吗。所以马上开始研究这个demo,发现这是通过Audio API实现的效果,但是这个demo是通过使用表单提交来播放本地音乐的。效果是不错,但是我是要做成在线播放的插件,于是只好来研究其实现的原理了,本以为稍微改改就能用了呢。
最终,通过研究这个demo代码和参考以下网址:
https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext
https://segmentfault.com/a/1190000003115198
http://www.2cto.com/kf/201312/265171.html
成功自己写个一个播放在线版本的频谱音乐播放器,效果图就像上面截图一样。当然其中也解决了好多个问题。
其中一个最大的问题就是这个播放器需要先把音乐下载下来,然后还要把音乐全部解码完成,然后才能开始播放。经过测试发现这个过程需要耗费30秒以上,结果就是播放完一首歌曲之后需要等待很长时间才能继续播放下一首歌曲,这么长时间的等待是完成不能忍受的。只能把它解决掉,看到评论说到可以在播放当前音乐的时候提前先把下一首的音乐解码来解决这个问题。我觉得这个方法不错,于是最终实现了双解码驱动的播放器,在播放当前音乐的时候自动解码下一首歌曲,从而实现了不间断的播放音乐。
目前,这个播放器算是实现了最重要的功能,也放上博客测试了下效果很不错。不过在正式上线之前还需要解决一些问题,目前播放器直接自动播放,需要加一个开始和停止按钮,上一首和下一首,暂停,音量调节等功能也需要实现,或许还需要加一个控制界面。
随机打乱数组的代码:array.sort(function(){return 0.5-Math.random()}) 这个人的想法不错---御坂打心里称赞道
如果你对这篇文章有什么改进意见,请点击这里告诉我。
热门
随机
御坂网络 - 任何足夠先進的技術,初看皆與魔法無異!