[英]Rendering large pianoroll with html/Javascript
I am working on a html5 audio app using the new web audio api, what I need for this is a "pianoroll", a keyboard grid where a user can draw notes as used in most music production software, I was thinking about two ways to create this. 我正在使用新的网络音频api开发html5音频应用程序,为此,我需要一个“钢琴卷”,一个键盘网格,用户可以在其中绘制大多数音乐制作软件中使用的音符,我在想两种方法创建这个。
I need to use the method that is most resource friendly because the rendering of the audio shouldn't be influenced by a slow responding interface, users should be able to scroll inside the pianoroll without any glitches. 我需要使用最资源友好的方法,因为音频的渲染不应受到响应速度慢的界面的影响,用户应该能够在钢琴卷轴中滚动而不会出现任何故障。
I could create a canvas with the size of the viewport and let it render when the user scrolls, I don't know if this will be any faster, there's a smaller canvas but it needs to rerender more. 我可以创建一个具有视口大小的画布,并在用户滚动时让其呈现,我不知道这样做是否会更快,有一个较小的画布,但是需要重新渲染。 For the table I could use fixed cells where the notes get put in (addChild, innerHTML) when they have to be showed but there won't be any smooth scrolling because it could only scroll by grid size (not a really big issue if it's fast enough), and would also require more re-rendering than a static table. 对于表,我可以使用固定的单元格,在这些单元格中必须显示注释时将其放入(addChild,innerHTML),但不会进行任何平滑滚动,因为它只能按网格大小滚动(如果它是足够快),并且还需要比静态表更多的重新渲染。
Is there something i overlooked and which solution is most resource friendly? 我有什么被忽略的,哪种解决方案最节省资源?
I wouldn't touch tables here for both the reasons you mentioned and also it'd be hacky getting the black keys nicely inset. 由于您提到的两个原因,我都不会在这里碰到桌子,而且很好地插入黑键也很棘手。
I'd lean towards canvas, because its really fast and your resource usage is fixed: just the pixels for the piano roll. 我倾向于画布,因为它的速度非常快并且您的资源使用情况是固定的:仅钢琴卷的像素。 Piano keys are also rectangular so picking logic wouldn't be too bad. 钢琴键也是矩形的,因此拾音逻辑不会太差。
However, if you do prefer to have keys as objects with events then, as abesto mentioned, vector graphics are the way to go. 但是,如果您确实希望将键作为具有事件的对象,那么就象abesto所提到的那样,矢量图形是可行的方法。 d3.js mbostock.github.com/d3/ is a nice JS library for DOM-based visualization that could help with creating the roll, assigning events to keys, and smoothly animating it scrolling. d3.js mbostock.github.com/d3/是一个不错的JS库,用于基于DOM的可视化,可以帮助创建滚动,将事件分配给键以及使滚动动画流畅。 You could use it to render HTML (DIVs, say) or SVG. 您可以使用它来呈现HTML(例如DIV)或SVG。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.