html5 – So verwenden Sie die Canvas-Technologie, um eine Musikpartitur zu erstellen, die nach oben und unten springt

Question

Ich würde gerne fragen, wie man mithilfe der Canvas-Technologie eine Musikpartitur erstellen kann, die auf und ab springt

Es ähnelt diesem Bild, mit dem einfachen Effekt, auf und ab zu springen!

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/...