用html / javascript渲染大型钢琴

Question

我正在使用新的网络音频api开发html5音频应用程序，为此，我需要一个“钢琴卷”，一个键盘网格，用户可以在其中绘制大多数音乐制作软件中使用的音符，我在想两种方法创建这个。

1. 创建一个大的html表并在单元格内创建标签以绘制注释
   • PRO注释操作很容易，因为我们正在使用html元素，并且可以使用它们的事件和方法。
   • CON我做了一些使用大表的项目，而我的经验浏览器在处理那么多元素时往往会变慢。
2. 创建画布以渲染网格和注释
   • 与具有智能缓存的大型表格相比， PRO的渲染速度可能更快
   • CON将需要更多的精力来使音符处理工作。
   • CON仍在滚动巨大的图像。

我需要使用最资源友好的方法，因为音频的渲染不应受到响应速度慢的界面的影响，用户应该能够在钢琴卷轴中滚动而不会出现任何故障。

我可以创建一个具有视口大小的画布，并在用户滚动时让其呈现，我不知道这样做是否会更快，有一个较小的画布，但是需要重新渲染。 对于表，我可以使用固定的单元格，在这些单元格中必须显示注释时将其放入（addChild，innerHTML），但不会进行任何平滑滚动，因为它只能按网格大小滚动（如果它是足够快），并且还需要比静态表更多的重新渲染。

我有什么被忽略的，哪种解决方案最节省资源？

Answer 1

由于您提到的两个原因，我都不会在这里碰到桌子，而且很好地插入黑键也很棘手。

我倾向于画布，因为它的速度非常快并且您的资源使用情况是固定的：仅钢琴卷的像素。 钢琴键也是矩形的，因此拾音逻辑不会太差。

但是，如果您确实希望将键作为具有事件的对象，那么就象abesto所提到的那样，矢量图形是可行的方法。 d3.js mbostock.github.com/d3/是一个不错的JS库，用于基于DOM的可视化，可以帮助创建滚动，将事件分配给键以及使滚动动画流畅。 您可以使用它来呈现HTML（例如DIV）或SVG。