|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
|
|
|
<meta charset="utf-8"> |
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon" /> |
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<link rel="stylesheet" href="examples-styles.css" /> |
|
|
|
|
|
<title>abcjs: Table of Contents</title> |
|
|
|
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<script type="text/javascript"></script> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header><img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"></header> |
|
|
|
|
|
<div class="container"> |
|
|
<h1>Table of Contents</h1> |
|
|
<p> |
|
|
Click on any of the demos below to get an idea of the types of things you can do with abcjs. |
|
|
If this is your first time using abcjs, the demos in the first section are suggested as they are |
|
|
the easiest to set up. After loading each demo, right-click the webpage and choose "view page source" |
|
|
to see how the demo works. |
|
|
</p> |
|
|
<table> |
|
|
<tbody> |
|
|
<tr class="table-header"> |
|
|
<td colspan="2">Start Here</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="basic.html">Basic</a></th> |
|
|
<td>A demo of the most bare-boned way to display sheet music.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="editor.html">Editor</a></th> |
|
|
<td>A demo of the simplest way to present the user with an editor so they can change music on the |
|
|
fly.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="basic-synth.html">Basic Synth</a></th> |
|
|
<td>A demo of the most basic way to incorporate audio playback using abcjs.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="analysis.html">Analysis</a></th> |
|
|
<td>A demo of the information that is available about an ABC tune book.</td> |
|
|
</tr> |
|
|
<tr class="table-header"> |
|
|
<td colspan="2">Visual Demos</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="animation.html">Animation</a></th> |
|
|
<td>A demo of animated cursor effects that can be added using abcjs.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="annotating.html">Annotating</a></th> |
|
|
<td>A demo showing how to annotate your sheet music using abcjs.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="basic.html">Basic</a></th> |
|
|
<td>A demo of the most bare-boned way to display sheet music.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="change_glyphs.html">Change Glyphs</a></th> |
|
|
<td>A demo showing how to substitute the music symbols with your own.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="wrap.html">Line Wrapping</a></th> |
|
|
<td>A demo of the line wrapping capabilities.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="plugin/abc_plugin.html">Plugin</a></th> |
|
|
<td>A demo showing how to use the plugin version of abcjs. (Useful for sites with a CMS where a user |
|
|
might enter ABC code)</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="printable.html">Printable</a></th> |
|
|
<td>A demo showing how to format the music for printing.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="responsive.html">Responsive</a></th> |
|
|
<td>A demo showing the music filling up whatever available horizontal space is on the page.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="zoom-to-fit.html">Zoom To Fit</a></th> |
|
|
<td>A demo showing the music filling up whatever available space is on the page.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="basic-transpose.html">Transpose</a></th> |
|
|
<td>A demo showing how to transpose.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="output-transpose.html">Output Transposed ABC</a></th> |
|
|
<td>A demo showing how to transpose and output the result of the transposition.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="tablatures.html">Tablature</a></th> |
|
|
<td>A demo showing how to create tablature.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="tune-selector.html">Tune Book</a></th> |
|
|
<td>A demo showing how to pick tunes from a tune book.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="add-note-names.html">Automatically Add Note Names</a></th> |
|
|
<td>A demo of modifying the SVG output after drawing to add note names.</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="table-header"> |
|
|
<td colspan="2">Interactive Demos</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="dragging.html">Dragging</a></th> |
|
|
<td>A demo showing how to implement a visual interface that supports dragging.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="editor.html">Editor</a></th> |
|
|
<td>A demo of the simplest way to present the user with an editor so they can change music on the |
|
|
fly.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="editor-synth.html">Editor With Synth</a></th> |
|
|
<td>A demo of the editor with synth capabilities</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="editor-transpose.html">Editor With Transpose</a></th> |
|
|
<td>A demo of the editor and transposing</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="table-header"> |
|
|
<td colspan="2">Audio Demos</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="basic-synth.html">Basic Synth</a></th> |
|
|
<td>A demo of the most basic way to incorporate audio playback using abcjs.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="karaoke-synth.html">Karaoke</a></th> |
|
|
<td>A demo of allowing the user to turn off voices.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="persian.html">Microtones</a></th> |
|
|
<td>A demo of creating non-western music that relies on a different scale.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="modify-synth-input.html">Modify Synth Input</a></th> |
|
|
<td>A demo showing how to tweak the synth after the music has been processed.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="play-on-repeat.html">Play On Repeat</a></th> |
|
|
<td>A demo showing how to loop a section of the music.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="synth-only.html">Synth Only</a></th> |
|
|
<td>A demo showing how to create sound without any visual representation.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="full-synth.html">Synth Options</a></th> |
|
|
<td>A full-featured demo with many synth options.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="synth-player.html">Synth Player</a></th> |
|
|
<td>A demo showing how to use abcjs' synth player.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="tempo.html">Tempo Changing</a></th> |
|
|
<td>Showing how to control the tempo.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="tune-instrument-switcher.html">Tune/Instrument Switcher</a></th> |
|
|
<td>Showing how to render and switch multiple tunes and change instruments.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="editor-swing.html">Swing Feel</a></th> |
|
|
<td>Showing how to add a swing feel to the synth.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="accompaniment.html">Accompaniment</a></th> |
|
|
<td>Showing how to vary the sound of the generated accompaniment.</td> |
|
|
</tr> |
|
|
<tr class="table-header"> |
|
|
<td colspan="2">Analysis</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="analysis.html">Analysis</a></th> |
|
|
<td>A demo of the information that is available about an ABC tune book.</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<th><a href="parsing.html">Parsing</a></th> |
|
|
<td>A demo of getting lyrics out of an abc string.</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</body> |
|
|
|
|
|
</html> |
