html5 - 如何利用Canvas技術制作出上下跳動的音樂譜

問題描述

想問一下，如何利用canvas技術制作出上下跳動的音樂譜

就是類似于這個圖片一樣的，簡單的可以上下跳動的效果！

問題解答

剛學前端的時候做過一個可視化音頻播放器，要用到 Web Audio API，配合 H5 Audio element 兼容性會好一些，至于 Canvas，網上有很多資料，就不贅述了：

Web Audio API

Web Audio API 在 ie 的兼容性不太好。另外，慕課有個課程，可以作為入門：

HTML5 音樂可視化-慕課網

以下是我自己做的小 Demo，僅做參考，用現代框架寫應該會好很多：

A demo(使用 Chrome 瀏覽)

[source code]https://github.com/huangbuyi/...