djib
/
TablatureJS
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Activity
A basic guitar tablature editor written in JavaScript
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
200 KiB
 
Tree: 7399122e7a
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '7399122e7a'
${ noResults }
TablatureJS/tablaturejs.html

657 lines
18 KiB
Raw Blame History 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  4. 	<head>

  5. 		<!-- vim: set lbr sbr=@___ encoding=utf-8 columns=80 lines=999: -->

  6. <!--

  7. TODO:

  8. 	* work with insert/delete

  9. 	* add repeat symbol (:)

  10. 

  11. CHANGELOG:

  12. 	v0.1.0 - 2010/12/20 

  13.     	* Implemented import

  14. 	v0.0.9 - 2010/05/11

  15. 		* Implemented export

  16. 	v0.0.8 - 2010/01/14

  17. 		* Implemented mouse click

  18. 	v0.0.7 - 2010/01/11

  19. 		* Improved deletion when placed on a bar

  20. 		* Major refactoring

  21. 		* Automatically deletion of trailing empty staves

  22. 		* Added copy/paste feature

  23. 	v0.0.6 - 2009/10/16

  24. 		* Added quick help

  25. 	v0.0.5 - 2009/09/25

  26. 		* Basic styling

  27. 	v0.0.4 - 2009/09/24

  28. 		* Possibility to add new staves

  29. 		* Moving from staff to staff with keys

  30. 	v0.0.3 - 2009/09/23

  31. 		* Moving current cell with keys

  32. 		* Adding speed

  33. 	v0.0.2 - 2009/09/22

  34. 		* Current cell display

  35. 	v0.0.1 - 2009/09/21

  36. 		* Basic staff display

  37. -->

  38. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  39. 		<title>TablatureJS</title>

  40. 		<script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>

  41. 		<script type="text/javascript">

  42. //<![CDATA[

  43. 	var Tablature = {

  44. 		NUMBER_OF_LINES : 6,

  45. 		WIDTH           : 78,

  46. 		MAX_SPEED       : 64,

  47. 		BORDER          : new Element('strong', { text : '|' }),

  48. 		LINE            : new Element('span', { text   : '-' }),

  49. 		BAR             : new Element('span', { text   : '|' }),

  50. 

  51. 		_numberOfStaves      : null,

  52. 		_currentStaffNumber  : null,

  53. 		_currentColumnNumber : null,

  54. 		_currentLineNumber   : null,

  55. 		_movingSpeed         : null,

  56. 		_mousePosition       : null,

  57. 		_copiedColumn        : ['-', '-', '-', '-', '-', '-'],

  58. 

  59. 		initialise: function() {

  60. 			Tablature._numberOfStaves = 0;

  61. 			Tablature._addStaff();

  62. 			Tablature._currentColumnNumber = 0;

  63. 			Tablature._currentLineNumber = 0;

  64. 			Tablature._currentStaffNumber = 0;

  65. 			Tablature._setMovingSpeed(1);

  66. 			Tablature._displayCursor();

  67. 			Tablature.hideExport();

  68. 			Tablature.hideImport();

  69. 			$('tab').addEvent('click', Tablature._onClick);

  70. 			$('tab').addEvent('mouseover', Tablature._onMouseOver);

  71. 			$('export').addEvent('click', Tablature.export);

  72. 			$('import').addEvent('click', Tablature.showImport);

  73. 			$('close-export').addEvent('click', Tablature.hideExport);

  74. 			$('close-import').addEvent('click', Tablature.hideImport);

  75. 			$('save-import').addEvent('click', Tablature.import);

  76. 		},

  77. 

  78. 		changeSpeed: function(increaseOrDecrease) {

  79. 			switch(increaseOrDecrease) {

  80. 				case 'increase':

  81. 					Tablature._setMovingSpeed( Tablature._movingSpeed * 2 );

  82. 					break;

  83. 				case 'decrease':

  84. 					Tablature._setMovingSpeed( Tablature._movingSpeed / 2 );

  85. 					break;

  86. 				;

  87. 			}

  88. 		},

  89. 

  90.     clear: function() {

  91.       for ( var staff = Tablature._numberOfStaves ; staff > 0 ; staff-- ) { 

  92.         Tablature._getStaff(staff-1).destroy();

  93.         Tablature._numberOfStaves--;

  94.       }

  95.     },

  96. 

  97. 		copyColumn: function() {

  98. 			Tablature._getCurrentColumn().each( function(e,i) {

  99. 				Tablature._copiedColumn[i] = e.get('text');

  100. 			});

  101. 		},

  102. 

  103. 		draw: function(key) {

  104. 			Tablature._getCurrentNote().set('text', key);

  105. 		},

  106. 

  107. 		drawBar: function() {

  108. 			Tablature._getCurrentColumn().each( function(p) {

  109. 				p.set('text', '|');

  110. 			});

  111. 		},

  112. 

  113. 		eraseColumn: function() {

  114. 			Tablature._getCurrentColumn().each( function(p) {

  115. 				p.set('text', '-');

  116. 			});

  117. 		},

  118. 		

  119. 		export: function() {

  120. 			var tab = '';

  121. 			

  122. 			$('tab').getElements('div').each( function(staff) {

  123. 				staff.getElements('p').each( function(line) {

  124. 					tab += '|';

  125. 					line.getElements('span').each( function(note) {

  126. 						tab += note.get('text');

  127. 					})

  128. 					tab += '|';

  129. 					tab += "\n";

  130. 				});

  131. 				tab += "\n";

  132. 			});

  133. 

  134. 			$('export-content').value = tab;

  135. 			Tablature._showExport();

  136. 		},

  137. 

  138. 		hideExport: function() {

  139. 			$('export-tab').setStyle('display','none');

  140. 		},

  141. 

  142. 		hideImport: function() {

  143. 			$('import-tab').setStyle('display','none');

  144. 		},

  145. 

  146. 		import: function() {

  147.       var tab = $('import-content').value;

  148.       lines = tab.match(new RegExp("\\|.{"+Tablature.WIDTH+"}\\|", "g"));

  149.       var staves = [];

  150.       for ( var staff = 0 ; staff*Tablature.NUMBER_OF_LINES < lines.length ; staff += 1 ) {

  151.         staves[staff] = [];

  152.         for ( var line = 0 ; line < Tablature.NUMBER_OF_LINES ; line++ ) {

  153.           staves[staff][line] = lines[staff*Tablature.NUMBER_OF_LINES+line].match(new RegExp(".", "g"));

  154.         }

  155.       }

  156.       Tablature.clear();

  157.       for ( var staff = 0 ; staff < staves.length ; staff++ ) {

  158.         Tablature._addStaff();

  159.         Tablature._currentStaffNumber = staff;

  160.         for ( var line = 0 ; line < staves[staff].length ; line++ ) {

  161.           Tablature._currentLineNumber = line;

  162.           for ( var note = 1 ; note < staves[staff][line].length-1 ; note++ ) {

  163.             Tablature._currentColumnNumber = note-1;

  164.             Tablature.draw(staves[staff][line][note]);

  165.           }

  166.         }

  167.       }

  168.       Tablature._currentStaffNumber = 0;

  169.       Tablature._currentColumnNumber = 0;

  170.       Tablature._currentLineNumber = 0;

  171.       Tablature._displayCursor();

  172.       Tablature.hideImport();

  173. 		},

  174. 

  175. 		move: function(direction) {

  176. 			Tablature._resetCursor();

  177. 			switch(direction) {

  178. 				case 'right':

  179. 					Tablature._currentColumnNumber = Math.min(

  180. 						Tablature.WIDTH - 1,

  181. 						Tablature._currentColumnNumber + Tablature._movingSpeed

  182. 					)

  183. 					break;

  184. 				case 'left':

  185. 					Tablature._currentColumnNumber = Math.max(

  186. 						0,

  187. 						Tablature._currentColumnNumber - Tablature._movingSpeed

  188. 					)

  189. 					break;

  190. 				case 'down':

  191. 					Tablature._currentLineNumber = Math.min(

  192. 						Tablature.NUMBER_OF_LINES - 1,

  193. 						Tablature._currentLineNumber + 1

  194. 					)

  195. 					break;

  196. 				case 'up':

  197. 					Tablature._currentLineNumber = Math.max(

  198. 						0,

  199. 						Tablature._currentLineNumber - 1

  200. 					)

  201. 					break;

  202. 				case 'next':

  203. 					Tablature._currentStaffNumber++;

  204. 					if ( Tablature._currentStaffNumber == Tablature._numberOfStaves ) {

  205. 						Tablature._addStaff();

  206. 					}

  207. 					break;

  208. 				case 'previous':

  209. 					if ( Tablature._currentStaffNumber == Tablature._numberOfStaves-1 ) {

  210. 						Tablature._deleteStaffIfEmpty();

  211. 					}

  212. 					Tablature._currentStaffNumber = Math.max(

  213. 						0,

  214. 						Tablature._currentStaffNumber - 1

  215. 					)

  216. 					break;

  217. 				case 'start':

  218. 					Tablature._currentColumnNumber = 0;

  219. 					break;

  220. 				case 'end':

  221. 					Tablature._currentColumnNumber = Tablature.WIDTH - 1;

  222. 					break;

  223. 				;

  224. 			}

  225. 			Tablature._displayCursor();

  226. 		},

  227. 

  228. 		pasteColumn: function() {

  229. 			Tablature._getCurrentColumn().each( function(e,i) {

  230. 				e.set('text', Tablature._copiedColumn[i]);

  231. 			});

  232. 		},

  233. 

  234. 		showImport: function() {

  235.       $('import-content').value='';

  236. 			$('import-tab').setStyle('display','block');

  237. 		},

  238. 

  239. 		_addStaff: function() {

  240. 			Tablature._numberOfStaves++;

  241. 			var newStaff = new Element('div', {

  242. 				'class': 'staff-' + Tablature._numberOfStaves

  243. 			});

  244. 			

  245. 			for ( var line = 0; line < Tablature.NUMBER_OF_LINES; line++ ) {

  246. 				var newLine = new Element('p');

  247. 				newLine.adopt(Tablature.BORDER.clone())

  248. 				for ( var column = 0; column < Tablature.WIDTH; column++ ) {

  249. 					newLine.adopt(Tablature.LINE.clone());

  250. 				}

  251. 				newLine.adopt(Tablature.BORDER.clone())

  252. 				newStaff.adopt(newLine);

  253. 			}

  254. 			$('tab').adopt(newStaff);

  255. 		},

  256. 

  257. 		_deleteStaffIfEmpty: function() {

  258. 			if ( Tablature._numberOfStaves > 1 ) {

  259. 				var isEmpty = Tablature._getCurrentLines().every( function(e, i) {

  260. 					return e.getElements('span').every( function(n, i) {

  261. 						return n.get('text') == '-';

  262. 					})

  263. 				})

  264. 				if ( isEmpty ) {

  265. 					Tablature._getCurrentStaff().destroy();

  266. 					Tablature._numberOfStaves--;

  267. 				}	

  268. 			}

  269. 		},

  270. 

  271. 		_displayCursor: function() {

  272. 			Tablature._getCurrentColumn().each( function(e, i) {

  273. 				e.addClass('active');

  274. 				if ( i == Tablature._currentLineNumber )

  275. 					e.addClass('current');

  276. 			});

  277. 			$('position').set('text', '{column}/{max} ({staff}/{staves})'.substitute({

  278. 				column: Tablature._currentColumnNumber + 1,

  279. 				max: Tablature.WIDTH,

  280. 				staff: Tablature._currentStaffNumber + 1,

  281. 				staves: Tablature._numberOfStaves

  282. 			}));

  283. 		},

  284. 

  285. 		_getCurrentColumn: function() {

  286. 			var lines = [];

  287. 			Tablature._getCurrentLines().each( function(e, i) {

  288. 			  lines[i] = e.getElements('span')[Tablature._currentColumnNumber];

  289. 			});

  290. 			return lines;

  291. 		},

  292. 

  293. 		_getCurrentLines: function() {

  294. 			return Tablature._getCurrentStaff().getElements('p');

  295. 		},

  296. 

  297. 		_getCurrentNote: function() {

  298. 			return Tablature._getCurrentLines()[Tablature._currentLineNumber]

  299. 			                .getElements('span')[Tablature._currentColumnNumber];

  300. 

  301. 		},

  302. 

  303. 		_getCurrentStaff: function() {

  304. 			return Tablature._getStaff(Tablature._currentStaffNumber);

  305. 		},

  306. 

  307. 		_getStaff: function(staffNumber) {

  308. 			return $('tab').getElements('div')[staffNumber];

  309. 		},

  310. 

  311. 		_onClick: function(e) {

  312. 			if ( e.target.get('tag') == 'span' ) {

  313. 				Tablature._resetCursor();

  314. 

  315. 				var currentCell = e.target;

  316. 				var currentLine = currentCell.getParent();

  317. 				var currentStaff = currentLine.getParent();

  318. 

  319. 				var columnIndex = currentLine.getElements('span').indexOf(currentCell);

  320. 				var lineIndex = currentStaff.getElements('p').indexOf(currentLine);

  321. 				var staffIndex = $('tab').getElements('div').indexOf(currentStaff);

  322. 

  323. 				Tablature._currentStaffNumber = staffIndex;

  324. 				Tablature._currentLineNumber = lineIndex;

  325. 				Tablature._currentColumnNumber = columnIndex;

  326. 				

  327. 				Tablature._displayCursor();

  328. 			}

  329. 		},

  330. 

  331. 		_onMouseOver: function(e) {

  332. 			if ( e.target.get('tag') == 'span' ) {

  333. 				$('tab').getElements('.selected')

  334. 				           .removeClass('selected');

  335. 				e.target.addClass('selected');

  336. 			}

  337. 		},

  338. 

  339. 		_resetCursor: function() {

  340. 			Tablature._getCurrentStaff().getElements('.active')

  341. 			                            .removeClass('active')

  342. 			                            .removeClass('current');

  343. 		},

  344. 

  345. 		_showExport: function() {

  346. 			$('export-tab').setStyle('display','block');

  347. 		},

  348. 

  349. 		_setMovingSpeed: function(newSpeed) {

  350. 			Tablature._movingSpeed = Math.min(

  351. 				Math.ceil(newSpeed),

  352. 				Tablature.MAX_SPEED

  353. 			);

  354. 			$('moving-speed').set('text', Tablature._movingSpeed);

  355. 		}

  356. 	}

  357. 

  358. 	var Command = {

  359. 		readInput: function(e) {

  360. 			//console.log( e.code + ': ' + e.key );

  361. 			var recognisedEvent = true;

  362. 

  363. 			switch(e.key) {

  364. 				case '+':

  365. 					Tablature.changeSpeed('increase');

  366. 					break;

  367. 				case '-':

  368. 					Tablature.changeSpeed('decrease');

  369. 					break;

  370. 				case 'right':

  371. 				case 'left':

  372. 				case 'up':

  373. 				case 'down':

  374. 					Tablature.move(e.key);

  375. 					break;

  376. 				case 'h':

  377. 				case 'p':

  378. 				case 't':

  379. 				case 'b':

  380. 				case '/':

  381. 				case '\\':

  382. 					Tablature.draw(e.key);

  383. 					break;

  384. 				case 'c':

  385. 					Tablature.copyColumn();

  386. 					break;

  387. 				case 'v':

  388. 					Tablature.pasteColumn();

  389. 					break;

  390. 				case 'e':

  391. 					Tablature.export();

  392. 					break;

  393. 				case 'i':

  394. 					Tablature.showImport();

  395. 					break;

  396. 				case 'space':

  397. 					Tablature.move('next');

  398. 					break;

  399. 				case 'enter':

  400. 					Tablature.drawBar();

  401. 					break;

  402. 				case 'esc':

  403. 					Tablature.hideExport();

  404. 					Tablature.hideImport();

  405. 					break;

  406. 				default:

  407. 					switch(e.code) {

  408. 						case 33: // PgUp

  409. 							Tablature.move('previous');

  410. 							break;

  411. 						case 34: // PgDwn

  412. 							Tablature.move('next');

  413. 							break;

  414. 						case 36: // Start

  415. 							Tablature.move('start');

  416. 							break;

  417. 						case 35: // End

  418. 							Tablature.move('end');

  419. 							break;

  420. 						case 48: // 0

  421. 						case 49: // 1

  422. 						case 50: // 2

  423. 						case 51:

  424. 						case 52:

  425. 						case 53:

  426. 						case 54:

  427. 						case 55:

  428. 						case 56:

  429. 						case 57: // 9

  430. 							Tablature.draw(e.key);

  431. 							break;

  432. 						case 46: // Numpad delete

  433. 							if ( Tablature._getCurrentNote().get('text') == '|' ) {

  434. 								Tablature.eraseColumn();

  435. 							} else {

  436. 								Tablature.draw('-');

  437. 							}

  438. 							break;

  439. 						case 42: // Numpad *

  440. 							Tablature.draw('X');

  441. 							break;

  442. 						default:

  443. 							recognisedEvent = false;

  444. 						;

  445. 					}

  446. 					break;

  447. 				;

  448. 			}

  449. 			if ( recognisedEvent ) {

  450. 				e.preventDefault();

  451. 			}

  452. 		}

  453. 	}

  454. 

  455. 	window.addEvent('domready', Tablature.initialise);

  456. 	window.addEvent('keydown', Command.readInput); // don't use keypress or event.keys will be wrong !

  457. //]]>

  458. 		</script>

  459. 		<style type="text/css">

  460. /*

  461. 	Syntax { display/position

  462. 	       ; size/margin

  463. 	       ; border

  464. 	       ; colour

  465. 	       ; text

  466. 	} 

  467. 	In vim, use 'AlignCtrl l:' and 'Align { ; }'

  468. */

  469. 

  470. /* tags */

  471. html, body       { margin: 0; padding: 0

  472.                  ; font-family: Verdana,sans-serif; font-size: 11pt

  473.                  } 

  474. div              { margin: 20px 0 }

  475. p                { margin: 0 }

  476. h1               { margin: 5px 0 0 0

  477.                  ; font-family: Georgia,fantasy; font-style: italic; font-size: 130%

  478.                  ; text-align: center

  479.                  } 

  480. h2               { margin: 0

  481.                  ; font-family: Georgia,fantasy; font-style: italic; font-size: 120%

  482.                  ; text-align: center

  483.                  } 

  484. h3               { margin: 10px 0 0

  485.                  ; border: 1px dotted #E3E3E3; border-width: 0 0 1px

  486.                  ; font-family: Georgia,fantasy; font-style: italic; font-size: 110%

  487.                  ; text-align: right

  488.                  } 

  489. ul               { margin: 0

  490.                  ; list-style-type: none

  491.                  } 

  492. li               { margin: 0; padding: 0

  493.                  ; border: 1px solid #E3E3E3; border-width: 1px 0 0 0

  494.                  } 

  495. a                { color: inherit; background-color: inherit

  496.                  ; border: 1px dotted black; border-width: 0 0 1px 0

  497.                  ; text-decoration: none }

  498. a:focus          { border-width: 0 }

  499. 

  500. /* ids */

  501. #tools           { position: fixed; top: 0;

  502.                  ; height: 36px; width: 100%; margin: 0; padding: 0 5px

  503.                  ; border: 1px solid black; border-width: 0 0 1px 0

  504.                  ; background-color: #FFFFE3; color: inherit

  505.                  ; font-size: 70%

  506.                  } 

  507. 

  508. #copyright       { position: fixed; bottom: 0;

  509.                  ; height: 26px; width: 100%; margin: 0; padding: 0 5px

  510.                  ; border: 1px solid black; border-width:  1px 0 0 0

  511.                  ; background-color: #FFFFE3; color: inherit

  512.                  ; font-size: 60%; text-align: center

  513.                  } 

  514. #tab             { margin: 46px 10px 36px 10px

  515.                  ; cursor: pointer

  516.                  } 

  517. #help            { position: fixed

  518.                  ; right: 0px; width: 200px; padding: 5px; margin: 0 10px

  519.                  ; border: 1px solid black;

  520.                  ; background-color: #FFFFE3; color: inherit

  521.                  ; font-size: 70%

  522.                  } 

  523. 

  524. #export-tab,

  525. #import-tab      { position: absolute

  526.                  ; left:10px; right: 230px; margin:0; padding: 5px; height: 300px

  527.                  ; border: 1px solid black; background-color: #E3E3E3; color: inherit

  528.                  } 

  529. #close-export,

  530. #close-import   { float: right

  531.                  ; font-size: 70%

  532.                  } 

  533. #export-content,

  534. #import-content  { height:80% }

  535. 

  536. /* classes */

  537. .active          { background-color: #E3E3FF; color: inherit }

  538. .current         { background-color: #8888FF; color: inherit }

  539. .selected        { background-color: #E3FFE3; color: inherit }

  540. 

  541. .generic-command { font-style: italic }

  542. 

  543. /* advanced */

  544. #tools dl        { margin: 0 }

  545. #tools dt        { display: inline

  546.                  ; margin-left: 10px

  547.                  ; font-weight: bold

  548.                  } 

  549. #tools dd        { display: inline

  550.                  ; padding: 0 10px 0 5px; margin: 0 0 0 0

  551.                  ; border: 1px solid #E3E3E3; border-width: 0 1px 0 0

  552.                  } 

  553. 

  554. #help dl         { margin: 0 }

  555. #help dt         { float: left

  556.                  ; padding: 0 5px 0 0; margin: 0

  557.                  ; width: 70px

  558.                  ; border: 1px dotted #E3E3E3; border-width: 0 1px 0 0

  559.                  ; font-weight: bold; text-align: right; white-space: nowrap

  560.                  } 

  561. #help dd         { overflow:hidden

  562.                  ; padding: 0 0 0 5px; margin: 0

  563.                  } 

  564. 		</style>

  565. 	</head>

  566. 	<body>

  567. 		<div id="tools">

  568. 			<h1>TablatureJS v0.1.0 (2010/12/20)</h1>

  569. 			<dl>

  570. 				<dt>Speed</dt>

  571. 				<dd id="moving-speed"></dd>

  572. 				<dt>Position</dt>

  573. 				<dd id="position"></dd>

  574. 				<dt>Actions</dt>

  575. 				<dd><a href="#" id="export">Export</a></dd>

  576. 				<dd><a href="#" id="import">Import</a></dd>

  577. 			</dl>

  578. 		</div>

  579. 		<div id="export-tab">

  580. 			<a href="#" id="close-export">[Close]</a>

  581. 			<textarea id="export-content" cols="80"></textarea>

  582. 		</div>

  583. 		<div id="import-tab">

  584. 			<a href="#" id="close-import">[Close]</a>

  585. 			<textarea id="import-content" cols="80"></textarea>

  586.       <br />

  587. 			<button id="save-import">Save</button>

  588. 		</div>

  589. 		<div id="help">

  590. 			<h2>Quick Help</h2>

  591. 			<h3>Motion</h3>

  592. 			<dl>

  593. 				<dt class="generic-command">arrow</dt>

  594. 				<dd>move around</dd>

  595. 				<dt class="generic-command">mouse click</dt>

  596. 				<dd>move around</dd>

  597. 				<dt>page up</dt>

  598. 				<dd>move to previous</dd>

  599. 				<dt>page down</dt>

  600. 				<dd>move to next staff</dd>

  601. 				<dt>space</dt>

  602. 				<dd>move to next staff</dd>

  603. 				<dt>start</dt>

  604. 				<dd>move to first column</dd>

  605. 				<dt>end</dt>

  606. 				<dd>move to last column</dd>

  607. 				<dt>+</dt>

  608. 				<dd>increase speed</dd>

  609. 				<dt>-</dt>

  610. 				<dd>decrease speed</dd>

  611. 			</dl>

  612. 			<h3>Edition</h3>

  613. 			<dl>

  614. 				<dt class="generic-command">number</dt>

  615. 				<dd>input note</dd>

  616. 				<dt>h</dt>

  617. 				<dd>input hammer</dd>

  618. 				<dt>p</dt>

  619. 				<dd>input pulloff</dd>

  620. 				<dt>t</dt>

  621. 				<dd>input tapping</dd>

  622. 				<dt>b</dt>

  623. 				<dd>input bend</dd>

  624. 				<dt>/</dt>

  625. 				<dd>input slide up</dd>

  626. 				<dt>\</dt>

  627. 				<dd>input slide down</dd>

  628. 				<dt>*</dt>

  629. 				<dd>input mute</dd>

  630. 				<dt>enter</dt>

  631. 				<dd>add bar</dd>

  632. 				<dt>delete</dt>

  633. 				<dd>delete note</dd>

  634. 				<dt>c</dt>

  635. 				<dd>copy bar</dd>

  636. 				<dt>v</dt>

  637. 				<dd>paste bar</dd>

  638. 			</dl>

  639. 			<h3>Special</h3>

  640. 			<dl>

  641. 				<dt>e</dt>

  642. 				<dd>export</dd>

  643. 				<dt>i</dt>

  644. 				<dd>import</dd>

  645. 			</dl>

  646. 		</div>

  647. 		<pre id="tab"></pre>

  648. 		<p id="copyright">

  649. 			<em>TablatureJS</em> is a program to edit Tablatures in a web browser.<br />

  650. 			<em>TablatureJS</em> is available under GPLv3 license.

  651. 			You can redistribute it or modify it freely.

  652. 			See <a href="http://en.wikipedia.org/wiki/GNU_General_Public_License">

  653. 			this page</a> for further details.

  654. 		</p>

  655. 	</body>

  656. </html>