用html/Javascript渲染大型钢琴

Question

我正在使用新的网络音频api处理html5音频应用程序，我需要的是一个“钢琴曲”，一个用户可以在大多数音乐中使用的键盘网格生产软件，我正在考虑两种方式来创建这个。

1. 创建一个大的HTML表并创建标记细胞内画出音符
   • PRO音符操作很简单，因为我们与html元素工作，并可以利用他们的活动和方法。
   • CON我做了一些使用巨大表格的项目，而且我的经验使用这些元素时，浏览器会变得很慢。
2. 创建画布渲染电网，并指出
   • PRO可能会更快渲染，如果相比于庞大的表与一些智能缓存
   • CON将需要更多的努力，使注意操作工作。
   • CON仍然滚动一个巨大的图像。

我需要使用最方便的资源，因为音频的呈现不应该由一个缓慢的响应接口的影响，用户应该能够给pianoroll内滚动，没有任何毛刺的方法。

我可以创建一个具有视口大小的画布，并让它在用户滚动时呈现，我不知道这是否会更快，还有更小的画布，但需要更多的渲染。 对于表格，我可以使用固定的单元格放置（addChild，innerHTML）时，它们必须显示，但不会有任何平滑的滚动，因为它只能通过网格大小滚动（不是一个真正的大问题，如果它足够快），并且还需要比静态表更多的重新渲染。

有什么我忽略了，哪个解决方案是最资源友好？

Answer 1

我不会碰这里的表格，因为你提到的两个原因，也是黑客得到黑键很好插入。

我倾向于画布，因为它的速度非常快，资源使用率也是固定的：只是钢琴卷的像素。钢琴键也是矩形的，所以拾音逻辑不会太差。然而，如果你更喜欢把键作为事件的对象，那么就像上面提到的那样，向量图形是要走的路。 d3.js mbostock.github.com/d3/是一个不错的JS库，用于基于DOM的可视化，可以帮助创建滚动，为按键分配事件，并平滑地动画滚动。你可以用它来渲染HTML（DIV，比如说）或者SVG。