如何使用alphaTab在带有JavaScript的浏览器中显示Guitar Pro选项卡

本文概述

什么是AlphaTab
要求
入门
例子

如果你曾经尝试学习弹吉他, 并且内部已经存在怪胎, 那么你可能会尝试过很棒的Guitar Pro, 该软件可以创作音乐, 转录你喜欢的歌曲, 或者只是阅读数千个可用的标签在网上。你可以简单地下载歌曲的选项卡, 然后尝试用吉他弹奏, 这简直令人难以置信。

现在, 如果你具有Javascript的基本编程知识, 则可以尝试使用开放源代码库AlphaTab在浏览器中实现和创建自己的” Guitar Pro”, 并且你将在本文中学习如何轻松地做到这一点。

什么是AlphaTab

alphaTab是跨平台音乐符号和吉他谱渲染库。你可以在自己的网站或应用程序中使用alphaTab来加载和显示来自Guitar Pro或内置标记语言alphaTex的数据源中的乐谱。 alphaTab主要关注基于Web的平台, 该功能允许将音乐符号嵌入到网站和基于浏览器的应用程序中, 但还可以在Windows, UWP和Xamarin等基于.net的平台中使用。 AlphaTab最著名的功能是：

加载GuitarPro 3-5, GuitarPro 6, AlphaTex或MusicXML
渲染为SVG, HTML5画布, GDI +
将单个或多个乐器显示为标准的音乐符号和吉他谱, 包括歌曲信息, 重复, 结尾, 吉他调, 谱号, 键签名, 时间签名, 音符, 休止符, 偶发, 鼓谱, 钢琴大谱, 并列音符, 宽限期音符, 死音, 鬼音, 标记, 节奏, 歌词, 和弦, 颤音, 动态, 敲击/拍打/流行音乐, 淡入, 让铃, 手掌静音, 弦弯曲, 打击乐器, 颤音采摘, 笔触, 幻灯片, 颤音, 敲击, 连音, 指法和三连音感觉。
通过动态调整大小来适应你的响应式设计。
通过HTML5 Web Audio API和Flash播放音乐表。

删除或更改负责呈现此通知的源代码部分。
通过裁剪或着色消息来隐藏此消息。

通过使用alphaTab, 你同意不会尝试任何隐藏此消息的操作。请访问该项目的主页和Github官方存储库以获取更多信息。

要求

AlphaTab的Javascript的生成母版(Javascript源代码和字体)。
由于AlphaTab使用WebWorkers, 因此需要使用http或https协议来提供文件(file：//将不起作用)。
一个有效的吉他专业选项卡进行测试(你可以在freeguitarprotabs.com上从喜欢的歌曲和艺术家中找到很多选项卡)。

此外, AlphaTab使用Bravura字体渲染音乐符号。 Bravura是一种音乐字体, 它借鉴了19世纪和20世纪初的欧洲最佳音乐雕刻, 其外观比大多数其他音乐字体更大胆, 更显眼：细笔触比其他字体稍粗, 从而改善了整体远距离阅读时字体的”黑色”及其易读性。 Bravura已获得SIL开放字体许可(OFL)的许可, 这意味着它可以免费下载而使用时几乎没有限制。

确保将字体导入项目中, 否则注释将无法正确呈现：

入门

1.添加所需的文件

添加所需的文件以使AlphaTab与某些脚本标签一起使用：

<!-- Including alphaTab -->
<script type="text/javascript" src="js/AlphaTab.js"></script>

<!-- jQuery Plugin -->
<script src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/jquery.alphaTab.js"></script>

<!-- Including alphaSynth -->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/AlphaSynth.js"></script>

<!-- alphaSynth Plugin -->
<script type="text/javascript" src="js/jquery.alphaTab.alphaSynth.js"></script>

2.创建音乐表容器

第一步, 你需要创建一个容器, 该容器将包装库生成的整个画布或SVG。该div需要通过data-file属性提供到Guitar Pro Tab文件的URL, 并且你需要定义要显示的初始音轨(为防止错误, 始终将第一个音轨标识为0)。 (可选)你可以插入显示加载消息的div, 并在最终加载Guitar Pro选项卡时将其删除：

<div id="alphaTab" data-file="/path/to/myguitarpro-tab-file.gp3" data-tracks="0">
    
    <div id="loading-div">
        Loading ...
    </div>
</div>

3.添加动作按钮

为了提供播放的基本控制, 我们需要添加一些按钮, 使我们可以播放, 暂停和停止MIDI声音。此外, 我们将添加一个div以显示选项卡的信息：

<input type="button" id="playPause" value="Play/Pause"/>
<input type="button" id="stopBtn" value="Stop"/>

<div id="file-info"></div>

4.声明标志变量并初始化alphaTab

我们将使用一些标志来了解选项卡的状态, 以便有条件地执行其他操作：

var playerReady = false;
var playerState = 0;
var at = $('#alphaTab');

// Load alphaTab
at.alphaTab({
    width: -1, // negative width enables auto sizing
    useWorker: true
});

// Initialize Player and Setup Player UI
var as = at.alphaTab('playerInit'); // init alphaSynth

5.添加一些基本的事件侦听器和操作

现在添加一些事件侦听器, 以了解何时加载了Guitar Pro选项卡, 播放器的状态何时改变以及单击侦听器以开始, 停止和暂停播放：

at.on('loaded', function (e) {
    var score = e.originalEvent.detail;
        
    // Add only the name of the tracks for information: 
    var info = jQuery('#file-info');
    info.html('');
    info.append('<p><b>Title:</b> ' + score.Title + '</p>');
    info.append('<p><b>Subtitle:</b> ' + score.Subtitle + '</p>');
    info.append('<p><b>Album:</b> ' + score.Album + '</p>');
    info.append('<p><b>Tempo:</b> ' + score.Tempo + '</p>');
    info.append('<p><b>Bars:</b> ' + score.MasterBars.length + '</p>');
    info.append('<p><b>Tracks:</b> (' + score.Tracks.length + ')</p>');
    var tracksHTML = $('<ul></ul>');

    for (var i = 0; i < score.Tracks.length; i++) {
        tracksHTML.append('<li> (#' + i + ') ' + score.Tracks[i].Name + '</li>');
    }

    info.append(tracksHTML);

    // Remove loading window
    $("#loading-div").remove();
});


// Important to load the file that allows to play sounds
as.On('ready', function (r) {
    // Load sound data (used to play sound, not the song itself)
    // Note: you need to provide the correct path to the default.sf2 file
    as.LoadSoundFontUrl('files/default.sf2');
});

// Show progress of the load of the guitar pro tab
as.On('soundFontLoad', function (loaded, full) {
    var percentage = ((loaded / full) * 100) | 0;

    console.log("Percentage sound loaded ", percentage + '%');
});


as.On('soundFontLoaded', function () {
    console.log("The sound source has been loaded");
});


as.On('readyForPlay', function (r) {
    playerReady = r;
});

as.On('playerStateChanged', function (s) {
    playerState = s;

    console.log(playerState);
    // 0 stopped 
    // 1 playing
    // 2 paused
});

$('#playPause').click(function () {
    if (playerState == 1) {
        as.Pause();
    } else {
        as.Play();
    }
});

$("#stopBtn").click(function () {
    as.Stop();
});

6.启用光标并添加基本CSS

启用光标以查看播放进度并突出显示音符：

at.alphaTab('playerCursor');

并添加一些CSS以使播放器起作用(这将为容器提供宽度, 并为光标提供某种样式)：

.barCursor {
    opacity: 0.15;
    background: #FFF200;
}

.beatCursor {
    opacity: 0.75;
    background: #0078ff;
}

.selectionWrapper div {
    opacity: 0.1;
    background: #4040FF;
}

.atHighlight * {
    fill: #0078ff;
}

.alphaTabSurface {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background: #FFF;
    border-radius: 3px;
}

#alphaTab {
    width: 95%;
    display: block;
    margin: auto;
}

#wrapper {
    position: absolute;
    top: 100px;
    background: blue;
    height: 600px;
    width: 80%;
    overflow: auto;
}

完成上一步之后, 你现在应该在浏览器中非常简单地实现Guitar Pro文件播放器。此外, 我们建议你在此处检查AlphaTab的其他功能和示例。

例子

以下示例显示如何显示Guitar Pro Tab文件的音轨以及播放, 暂停或停止它的按钮：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Guitar Pro tab with AlphaTab</title>

    <!-- Including alphaTab -->
    <script type="text/javascript" src="js/AlphaTab.js"></script>

    <!-- jQuery Plugin -->
    <script src="js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.alphaTab.js"></script>

    <!-- Including alphaSynth -->
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/AlphaSynth.js"></script>

    <!-- alphaSynth Plugin -->
    <script type="text/javascript" src="js/jquery.alphaTab.alphaSynth.js"></script>

    <!-- Styles used during the reproduction of the MIDI melody -->
    <style type="text/css">
        .barCursor {
            opacity: 0.15;
            background: #FFF200;
        }
        
        .beatCursor {
            opacity: 0.75;
            background: #0078ff;
        }
        
        .selectionWrapper div {
            opacity: 0.1;
            background: #4040FF;
        }
        
        .atHighlight * {
            fill: #0078ff;
        }
        
        .alphaTabSurface {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            background: #FFF;
            border-radius: 3px;
        }
        
        #alphaTab {
            width: 95%;
            display: block;
            margin: auto;
        }
        
        #wrapper {
            position: absolute;
            top: 100px;
            background: blue;
            height: 600px;
            width: 80%;
            overflow: auto;
        }
    </style>
</head>

<body>
    <!-- START CONTROLS AND INFORMATION -->
    <div>
        <div style="display: inline-block; margin: 1em;">
            <!-- The action button to play or pause the tab -->
            <input type="button" id="playPause" value="Loading ... " disabled="disabled" />
            <input type="button" id="stopBtn" value="Stop" disabled="disabled" />
        </div>
        <div style="display: inline-block; margin: 1em;">
            <!-- The basic information of the gp file will be shown here -->
            <div id="file-info"></div>
        </div>
        <div style="display: inline-block;margin: 1em;">
            <!-- The track filter will be rendered in this div-->
            <div id="trackList"></div>
        </div>
    </div>
    <!-- END CONTROLS AND INFORMATION -->


    <!-- START DYNAMIC MUSIC SHEET -->

    <!-- 
        The data-tracks defines which track of the gp file should be initially used 
        Note: change the data-file property according to the URL of your guitar tab file
    -->
    <div id="alphaTab" data-file="files/guns_november_rain.gp3" data-tracks="0">
        <!-- This loading div is removed once the gp file is loaded -->
        <div id="loading-div">
            Loading ...
        </div>
    </div>

    <!-- END DYNAMIC MUSIC SHEET -->

    <script> 
        var playerReady = false;
        var playerState = 0;
        var at = $('#alphaTab');

    
        // 1. Register resize event 
        // we do this before initializing to receive the initial resize event
        $(at).on('resize', function (e) {
            var info = e.originalEvent.detail;
            var newSize = info.NewWidth;

            if (newSize < 700) {
                console.log(info.NewWidth, 'horizontal');
                info.Settings.Layout.Mode = "horizontal";
            } else {
                console.log(info.NewWidth, 'page');
                info.Settings.Layout.Mode = "page";
                delete info.Settings.Layout.AdditionalSettings['barsPerRow'];
            }
        });

        //
        // 2. Load alphaTab
        at.alphaTab({
            width: -1, // negative width enables auto sizing
            useWorker: true
        });

        //
        // 1. Initialize track selector
        // Note that in this example we allow to render multiple tracks in the view
        // You can simply create a select box that displays only 1 track at time
        var tracks = [];
        at.on('loaded', function (e) {
            var score = e.originalEvent.detail;
            var trackList = $('#trackList');
            trackList.empty();

            // Loop through the tracks of the file and add the tracks filter
            for (var i = 0; i < score.Tracks.length; i++) {
                // build list item for track
                var li = $('<li></li>');
                var a = $('<a href="#"></a>')
                    .data('track', score.Tracks[i].Index)
                    .append('<input type="checkbox" />')
                    .append(score.Tracks[i].Name)

                    // here we build the new track list and render it
                    .on('click', function (e) {
                        var track = $(this).data('track');
                        var index = tracks.indexOf(track);
                        if (index > -1) {
                            tracks.splice(index, 1);
                            $(this).find('input').prop('checked', false);
                        } else {
                            tracks.push(track);
                            tracks.sort(), $(this).find('input').prop('checked', true);
                        }

                        // render new tracks
                        at.alphaTab('tracks', tracks);

                        $(e.target).blur();

                        return false;
                    });

                li.append(a);

                trackList.append(li);
            }


            // Add only the name of the tracks for information: 
            
            var info = jQuery('#file-info');
            info.html('');
            info.append('<p><b>Title:</b> ' + score.Title + '</p>');
            info.append('<p><b>Subtitle:</b> ' + score.Subtitle + '</p>');
            info.append('<p><b>Album:</b> ' + score.Album + '</p>');
            info.append('<p><b>Tempo:</b> ' + score.Tempo + '</p>');
            info.append('<p><b>Bars:</b> ' + score.MasterBars.length + '</p>');
            info.append('<p><b>Tracks:</b> (' + score.Tracks.length + ')</p>');
            var tracksHTML = $('<ul></ul>');

            for (var i = 0; i < score.Tracks.length; i++) {
                tracksHTML.append('<li> (#' + i + ') ' + score.Tracks[i].Name + '</li>');
            }

            info.append(tracksHTML);

            $("#loading-div").remove();
        });


        // 3. Initialize Player and Setup Player UI
        var as = at.alphaTab('playerInit'); // init alphaSynth

        as.On('ready', function (r) {
            // Load sound data (used to play sound, not the song itself)
            as.LoadSoundFontUrl('files/default.sf2');
        });



        as.On('soundFontLoad', function (loaded, full) {
            var percentage = ((loaded / full) * 100) | 0;

            console.log("Percentage sound loaded ", percentage + '%');
        });


        as.On('soundFontLoaded', function () {
            console.log("The sound source has been loaded");
        });


        as.On('readyForPlay', function (r) {
            playerReady = r;
            updateControls();
        });

        as.On('playerStateChanged', function (s) {
            playerState = s;
            updateControls();
        });

        $('#playPause').click(function () {
            if (playerState == 1) {
                as.Pause();
            } else {
                as.Play();
            }
        });

        $("#stopBtn").click(function () {
            as.Stop();
            // Disable stop btn
            $(this).attr("disabled", "disabled");
        });

        function updateControls() {
            if (playerReady) {
                $('#playPause').prop('disabled', false);
                $('#playPause').removeAttr('disabled');

                switch (playerState) {
                    case 0: // stopped
                        $("#playPause").val("Play");
                        break;

                    case 1: // playing
                        $("#playPause").val("Pause");
                        $('#stopBtn').removeAttr('disabled').removeClass('disabled');
                        break;

                    case 2: // paused
                        $("#playPause").val("Play");
                        $('#stopBtn').removeAttr('disabled').removeClass('disabled');
                        break;
                }
            }
        }

        // 3. Add cursors (optional, displays the current position of the playback etc)
        at.alphaTab('playerCursor');
         
    </script>
</body>

</html>

先前的html文件(包含所有JS文件和字体)应在浏览器中显示以下结果：

如前所述, 该示例非常不可知, 而且确实非常简单, 但是了解AlphaTab的基本方法如何工作非常有用。或者, 你可以简单地下载最新版本的AlphaTab, 其中包括该库和一些示例(包括将显示的选项卡)：

编码愉快！

本文概述

什么是AlphaTab

要求

入门

1.添加所需的文件

2.创建音乐表容器

3.添加动作按钮

4.声明标志变量并初始化alphaTab

5.添加一些基本的事件侦听器和操作

6.启用光标并添加基本CSS

例子

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

什么是AlphaTab

要求

入门

1.添加所需的文件

2.创建音乐表容器

3.添加动作按钮

4.声明标志变量并初始化alphaTab

5.添加一些基本的事件侦听器和操作

6.启用光标并添加基本CSS

例子

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发