alphaTab - SVG

Back

This sample shows how to render alphaTab using SVG instead of HTML5 canvas

| |

Source

<script language="JavaScript" type="text/javascript"> (function($) { $(document).ready(function() { var api = $('div.alphaTab').alphaTab({ context: alphatab.platform.PlatformFactory.SVG_CANVAS, loadCallback: function(song) { var tracks = $('#Tracks'); tracks.find('option').remove(); for(var i = 0; i < song.tracks.length; i++) { var elm = $('<option value="'+i+'">'+song.tracks[i].name+'</option>'); if(i == 0) { elm.attr("selected", "selected"); } tracks.append(elm); } } }); // initialize button events $('#LoadSample').click(function(){ var testFile = $('#TestFile :selected').val(); api.loadFile(testFile); }); $('#Zoom').change(function(){ var zoomlvl = parseFloat($('#Zoom :selected').val()); api.tablature.updateScale(zoomlvl); }); $('#UpdateTrack').click(function() { var index = parseInt($('#Tracks :selected').val()); api.tablature.setTrack(api.tablature.track.song.tracks[index]); }); }); })(jQuery); </script> <!-- File List --> <select id="TestFile"> <option value="files/GuitarPro6Jingle.gpx">Guitar Pro 6 Jingle(Gpx)</option> <option value="files/FadeToBlack.gp4">Metallica - Fade To Black (Gp4)</option> <option value="files/Love.gp4">Love(Gp4)</option> <option value="files/Canon.gp5">JerryC - CanonRock (Gp5)</option> <option value="files/Serenade.gp5">Suidakra - Serenade to a Dream (Gp5)</option> <option value="files/Effects.gp5">Effects (Gp5)</option> <option value="files/Effects.gpx">Effects (Gpx)</option> <option value="files/Drums.gp5">Drums (Gp5)</option> <option value="files/Displaced.gp5">Displaced (Gp5)</option> </select> <input id="LoadSample" type="button" value="Load" /> | <!-- Tracks --> <label for="Tracks">Tracks:</label> <select id="Tracks"> </select> <input id="UpdateTrack" type="button" value="Show" /> | <!-- Zoom --> <select id="Zoom"> <option value="0.5">50%</option> <option value="0.75">75%</option> <option value="1.0">100%</option> <option value="1.1" selected="selected">110%</option> <option value="1.25">125%</option> <option value="1.5">150%</option> <option value="2.0">200%</option> </select> <br /> <div class="alphaTab"></div>