html5 - How to use Canvas technology to create a music score that jumps up and down

Question

I would like to ask how to use canvas technology to create a music score that jumps up and down

is similar to this picture, with a simple effect of jumping up and down!

Answer 1

When I first learned about front-end, I made a visual audio player. I needed to use the Web Audio API, and the compatibility would be better with the H5 Audio element. As for Canvas, there is a lot of information on the Internet, so I won’t go into details:

• Web Audio API

Web Audio API is not very compatible with IE. In addition, MOOC has a course that can be used as an introduction:

• HTML5 Music Visualization-MOOC

The following is a small demo I made myself. It is just for reference. It should be much better to write it with a modern framework:

• A demo (browse using Chrome)

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