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

Question

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

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

Answer 1

剛學前端的時候做過一個可視化音頻播放器，要用到 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/...