如何才能在HTML5中最高效地显示音乐和弦?

t0m*_*m0d 0 html html5 svg

我目前正在攻读软件工程学位的最后一年项目.我已经决定我的项目是使用HTML5开发一个Web应用程序,它将在Web浏览器(特别是Google Chrome)中显示和弦表.这个想法是乐队的每个成员可能在他们面前有某种设备(iPad,笔记本电脑等),可以访问他们可以登录的应用程序,查看歌曲的和弦作为通过集合的进度和添加存储在数据库中的注释,然后每次在他们的screem上显示歌曲时向用户显示.

但是,我在浏览器窗口中如何最好地显示所有这些内容时遇到问题.我希望它具有与浏览器窗口中显示的PDF文档类似的外观,因为用户能够水平和垂直滚动并放大和缩小,就像他们正在查看PDF文档一样.使用SVG图形是实现这一目标的最佳方法吗?或者还有另一种方式吗?

渲染速度将变得非常重要,因为这将是一个可能在现场使用的系统,我需要确保尽可能低的页面加载/渲染时间.

我非常感谢你的任何想法!

Mat*_*ens 5

查看Vexflow!它是一个开源的基于Web的音乐符号渲染API,完全用JavaScript编写,可以在浏览器中运行.VexFlow支持HTML5画布和SVG.

这是一个演示,这是一个教程.