用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。