html/javascript로 대용량 피아노 연주하기

Question

새로운 웹 오디오 API를 사용하여 html5 오디오 앱을 제작하고 있는데, 내가 필요한 것은 대부분의 음악에서 사용되는 노트를 그릴 수있는 키보드 그리드 인 "피아노 롤"입니다. 프로덕션 소프트웨어를 만들려면이 두 가지 방법을 생각하고있었습니다.

1. 우리가 HTML 요소로 작업과 이벤트 및 방법을 사용할 수 있기 때문에
   • PRO 참고 조작이 용이 노트를 그리는 세포 내부에 태그를 큰 HTML 테이블을 생성하고 생성합니다.
   • CON 거대한 테이블을 사용하는 몇 가지 프로젝트를 수행했고 많은 경험을 가진 브라우저는 많은 요소로 작업 할 때 속도가 느려지는 경향이 있습니다.
2. 그리드를 렌더링하기 위해 캔버스를 만들고 수 있도록 더 많은 노력을 필요로 일부 스마트 캐싱
3. CON으로 거대한 테이블에 비교하면
   • PRO 렌더링하기 위해 빠를 수 노트 메모 조작 작업.
   • cont 여전히 큰 이미지를 스크롤합니다.

나는 오디오의 렌더링이 느린 응답 인터페이스에 의해 영향을 안하기 때문에, 사용자가 어떤 고장없이 피아노 롤 내에서 스크롤 할 수 있어야한다 대부분의 자원 친화적 인 방법을 사용합니다.

뷰포트의 크기로 캔버스를 만들 수 있고 사용자가 스크롤 할 때 렌더링 할 수 있지만 더 빨라지는지, 작은 캔버스가 더 많이 렌더링되는지는 잘 모르겠지만 더 많이 렌더링해야합니다. 테이블에 대해 고정 셀을 사용할 수 있는데, 노트를 표시해야 할 때 (addChild, innerHTML) 표시해야하지만 그리드 크기 만 스크롤 할 수 있기 때문에 원활한 스크롤링이되지 않습니다 (실제로 큰 문제는 아님). 그것은 충분히 빠름) 정적 테이블보다 더 많은 재 렌더링이 필요합니다.

내가 간과 한 것이 있으며 어떤 솔루션이 가장 리소스 친화적입니까?

Answer 1

내가 언급 한 두 가지 이유 때문에 여기 테이블을 건드리지는 않겠지 만, 검은 건반을 멋지게 꾸미는 것은 해킹 될 것입니다.

저는 캔버스쪽으로 기울어 져 있습니다. 왜냐하면 정말 빠르고 리소스 사용량이 고정되어 있기 때문입니다. 피아노 굴림을위한 픽셀 일뿐입니다. 피아노 건반은 직사각형이기 때문에 피킹 로직이 그렇게 나쁘지는 않습니다.

그러나 이벤트가있는 객체를 키로 사용하려는 경우 abesto에서 언급했듯이 벡터 그래픽을 사용하는 것이 좋습니다. d3.js mbostock.github.com/d3/은 롤을 만들고, 키에 이벤트를 할당하고, 애니메이션을 부드럽게 움직이는 데 도움이되는 DOM 기반 시각화를위한 멋진 JS 라이브러리입니다. HTML (DIVs, say) 또는 SVG를 렌더링하는 데 사용할 수 있습니다.