html5 - 캔버스 기술을 사용하여 위아래로 점프하는 악보를 만드는 방법

Question

캔버스 기술을 활용해 위아래로 튀는 악보를 만드는 방법을 묻고 싶습니다

위 사진과 비슷한데, 간단하게 위아래로 점프하는 효과가 있어요!

Answer 1

프론트엔드를 처음 배웠을 때 Web Audio API를 사용해서 비주얼 오디오 플레이어를 만들었는데, Canvas의 경우 인터넷에 정보가 많아서 호환성이 더 좋아질 것 같아요. 자세한 내용은 다루지 않겠습니다:

• 웹 오디오 API

웹 오디오 API는 IE와 잘 호환되지 않습니다. 또한 MOOC에는 소개로 사용할 수 있는 과정도 있습니다.

• HTML5 음악 시각화-MOOC

다음은 제가 직접 만든 작은 데모입니다. 이는 단지 참고용일 뿐입니다. 최신 프레임워크로 작성하는 것이 훨씬 나을 것입니다.

• 데모(Chrome을 사용하여 탐색)

• [소스코드]https://github.com/huangbuyi/...