锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识音乐浏览器javascript吉他乐谱JavaScript开发

本文概述

  • 什么是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呈现” 的版权声明。这意味着你不得：
  • 删除或更改负责呈现此通知的源代码部分。
  • 通过裁剪或着色消息来隐藏此消息。
通过使用alphaTab, 你同意不会尝试任何隐藏此消息的操作。请访问该项目的主页和Github官方存储库以获取更多信息。
要求
  • AlphaTab的Javascript的生成母版(Javascript源代码和字体)。
  • 由于AlphaTab使用WebWorkers, 因此需要使用http或https协议来提供文件(file：//将不起作用)。
  • 一个有效的吉他专业选项卡进行测试(你可以在freeguitarprotabs.com上从喜欢的歌曲和艺术家中找到很多选项卡)。
此外, AlphaTab使用Bravura字体渲染音乐符号。 Bravura是一种音乐字体, 它借鉴了19世纪和20世纪初的欧洲最佳音乐雕刻, 其外观比大多数其他音乐字体更大胆, 更显眼：细笔触比其他字体稍粗, 从而改善了整体远距离阅读时字体的” 黑色” 及其易读性。 Bravura已获得SIL开放字体许可(OFL)的许可, 这意味着它可以免费下载而使用时几乎没有限制。
确保将字体导入项目中, 否则注释将无法正确呈现：
如何使用alphaTab在带有JavaScript的浏览器中显示Guitar Pro选项卡

文章图片
入门 1.添加所需的文件
添加所需的文件以使AlphaTab与某些脚本标签一起使用：
< !-- Including alphaTab --> < script type="text/javascript" src="http://www.srcmini.com/js/AlphaTab.js"> < /script> < !-- jQuery Plugin --> < script src="http://www.srcmini.com/js/jquery-2.2.4.min.js"> < /script> < script type="text/javascript" src="http://www.srcmini.com/js/jquery.alphaTab.js"> < /script> < !-- Including alphaSynth --> < script type="text/javascript" src="http://www.srcmini.com/js/swfobject.js"> < /script> < script type="text/javascript" src="http://www.srcmini.com/js/AlphaSynth.js"> < /script> < !-- alphaSynth Plugin --> < script type="text/javascript" src="http://www.srcmini.com/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="http://www.srcmini.com/Play/Pause"/> < input type="button" id="stopBtn" value="http://www.srcmini.com/Stop"/> < div id="file-info"> < /div>

4.声明标志变量并初始化alphaTab
我们将使用一些标志来了解选项卡的状态, 以便有条件地执行其他操作：
var playerReady = false; var playerState = 0; var at = $('#alphaTab'); // Load alphaTabat.alphaTab({width: -1, // negative width enables auto sizinguseWorker: true}); // Initialize Player and Setup Player UIvar 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 soundsas.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 fileas.LoadSoundFontUrl('files/default.sf2'); }); // Show progress of the load of the guitar pro tabas.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="http://www.srcmini.com/js/AlphaTab.js"> < /script> < !-- jQuery Plugin --> < script src="http://www.srcmini.com/js/jquery-2.2.4.min.js"> < /script> < script type="text/javascript" src="http://www.srcmini.com/js/jquery.alphaTab.js"> < /script> < !-- Including alphaSynth --> < script type="text/javascript" src="http://www.srcmini.com/js/swfobject.js"> < /script> < script type="text/javascript" src="http://www.srcmini.com/js/AlphaSynth.js"> < /script> < !-- alphaSynth Plugin --> < script type="text/javascript" src="http://www.srcmini.com/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="http://www.srcmini.com/Loading ..." disabled="disabled" /> < input type="button" id="stopBtn" value="http://www.srcmini.com/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 alphaTabat.alphaTab({width: -1, // negative width enables auto sizinguseWorker: 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 timevar 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 filterfor (var i = 0; i < score.Tracks.length; i++) {// build list item for trackvar li = $('< li> < /li> '); var a = $('< a href="http://www.srcmini.com/#"> < /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 tracksat.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 UIvar as = at.alphaTab('playerInit'); // init alphaSynthas.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在带有JavaScript的浏览器中显示Guitar Pro选项卡

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

文章图片
【如何使用alphaTab在带有JavaScript的浏览器中显示Guitar Pro选项卡】编码愉快！

    推荐阅读


    上一篇：如何使用Swift检索Mac的序列号

    下一篇：Opencv中几何变换