使用AlphaTab在网页上渲染gp5格式的乐谱

之前在做一个吉他谱网站项目的时候一直想找一款可以在网页端渲染gp5格式乐谱（即guitar pro5的默认乐谱格式）的前端插件，不过一直没有找到合适的，就这样这个项目中止了半年多，但最近终于发现了一个非常不错的插件“AlphaTab”，它支持在网页端渲染乐谱，采用SVG绘制；它不仅支持gp5，也同样支持gp3、gp4、gpx，还支持一种专门为AlphaTab创造的用文本表示的乐谱格式。除了在它的官网有一些简单的教程，网上就没有找到什么教程说这个插件了，所以在看了它在github上面的demo之后，就想着写一个简单的关于如何使用alphatab的教程。

下载插件

这下面是alphatab的下载地址

AlphaTab下载地址

下载之后将压缩文件中的JavaScript文件夹复制出来。

准备一个gp5格式的乐谱文件

我在网上找了一个押尾光太郎的twilight的gp5格式的吉他指弹谱，我们将用这个乐谱来测试

代码部分

在在页面中引入 jquery和下载下来的JavaScript文件夹中的swfobject.js和alphaTab.min.js，然后再初始化alphatab，并指定gp5文件的路径。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1.0'>
        <link href="https://s2.pstatp.com/cdn/expire-1-M/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet'>
        <script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/2.2.1/jquery.min.js" type="application/javascript"></script>
        <script src="https://s2.pstatp.com/cdn/expire-1-M/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="application/javascript"></script>

        <!-- 引入alphatab的js文件 -->
        <script type="text/javascript" src="JavaScript/swfobject.js"></script>
        <script type="text/javascript" src="JavaScript/alphaTab.min.js"></script>
        <title>twilight</title>
        <script>

        </script>
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div id='alphatab'></div>
            </div>
        </div>
    </body>
        <script>
            <!--初始化alphatab并指定gp5文件路径-->
            $('#alphatab').alphaTab({
                file: 'twilight.gp5',
                track: [0]
            })
        </script>
</html>

打开浏览器查看

使用AlphaTab在网页上渲染gp5格式的乐谱

这样就可以在网页端显示gp5格式文件了。

如果无法加载gp5文件出现了这样的错误：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
无法加载本地资源，只需要在浏览器的快捷方式中的目标后面添加上--allow-file-access-from-files，然后重启浏览器就行了。

使用AlphaTab在网页上渲染gp5格式的乐谱

之后部署在服务器上若gp5文件与网页不在同一域名下也可能会出现错误，只要处理好跨域请求就能正常显示。

其他

以上就是关于使用AlphaTab的简单教程啦，希望对有需要的小伙伴有所帮助，然后这个链接（https://www.alphatab.net/ ）是alphatab的官方网站，可以在这里面下载与查看关于插件的使用教程；有问题的小伙伴欢迎在下面留言，我看到了会及时回复的。

使用AlphaTab在网页上渲染gp5格式的乐谱

下载插件

准备一个gp5格式的乐谱文件

代码部分

其他

最新文章

最新随笔