vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
149 lines (130 loc) • 6.38 kB
HTML
<html>
<head>
<title>VexFlow - HTML5 Music Engraving</title>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT|Yanone+Kaffeesatz|Tangerine'
rel='stylesheet' type='text/css'>
<link href="http://vwww.vexflow.com/vextab/tabdiv.css" media="screen" rel="Stylesheet" type="text/css" />
<link href="http://www.vexflow.com/vextab/style.css" media="screen" rel="Stylesheet" type="text/css" />
<!-- VexFlow Compiled Source -->
<script src="../build/vexflow/vexflow-debug.js"></script>
<script src="vextab/support/vexflow-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://www.vexflow.com/support/tabdiv-debug.js"></script>
</head>
<body>
<div class="vex">
<a href="http://my.vexflow.com">My VexFlow</a> |
<a href="http://vexflow.com/vextab/">VexTab</a> |
<a href="http://0xfe.blogspot.com">0xfe</a>
</div>
<div class="header">
<h1>VexFlow</h1>
<div class="main">
<b>Music Engraving in JavaScript and HTML5</b>
</div>
v2.0 by <a href="http://0xfe.blogspot.com">0xfe</a>.
</div>
<div class="content">
<h2>What is VexFlow?</h2>
<div class="description">
VexFlow is an open-source online music notation rendering API. It is written
completely in JavaScript, and runs right in the browser. VexFlow supports
HTML5 Canvas and SVG.
<p/>
The score below was rendered in your browser.
</div>
<div style="width:680; margin-left: auto; margin-right: auto;">
<div class="vex-tabdiv"
width=700 scale=0.9 editor="false"
editor_width=640 editor_height=230>options space=20
tabstave notation=true key=A time=4/4
notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
text :w, |#segno, ,|, :hd, , #tr
options space=25
tabstave notation=true
notes :q (5/4.5/5) (7/4.7/5)s(5/4.5/5) ^3^
notes :8 7-5/4 $.a./b.$ (5/4.5/5)h(7/5) =:|
notes :8 (12/5.12/4)ds(5/5.5/4)u 3b4/5
notes :h (5V/6.5/4.6/3.7/2) $.italic.let ring$ =|=
text :h, ,.font=Times-12-italic, D.S. al coda, |#coda
text :h, ,.-1, .font=Arial-14-bold,A13
text ++, .23, #f
</div>
<p/>
<h2>Where Do I Start?</h2>
<div class="docs">
If you're not a programmer, there are many ways to use VexFlow to create, share, or publish your music online:
<p/>
<ul>
<li>The <a href="https://chrome.google.com/webstore/detail/vextab-music-notation/pjggkphnejbllmmkmmgibonkbbhfjnkk">VexTab Google Docs add-on</a> lets you add music notation right in your Google Documents.</li>
<li>You can use the <a href="https://chrome.google.com/webstore/detail/npcffdibegeppkebphaghnpkcjcpopjf">VexTab Chrome Extension</a> to write and share musical snippets hosted on <a href="http://imgur.com">imgur</a> right from your browser.</li>
<li>The <a href="http://www.vexflow.com/vextab/playground/">VexTab Playground</a>
is a simple online application to quickly create and post music notation to <a href="http://imgur.com">imgur</a>.
</ul>
<p/>
If you're a programmer interested in rendering music notation in your
own applications, take a look at
<a href="https://github.com/0xfe/vexflow/wiki/The-VexFlow-Tutorial">The VexFlow Tutorial</a>.
</div>
<p/>
<h2>Features</h2>
<div class="docs">
It sings, it dances, it does your dishes. Actually it does none of that.
But it can render a mean score.
<p/>Have a look
at the <a href="http://www.vexflow.com/tests/">tests</a> page for a comprehensive list of features.
</div>
<h2>What is VexTab?</h2>
<div class="description">
<a href="http://vexflow.com/vextab/">VexTab</a> is an easy-to-use
language to quickly create, edit, and render standard notation and guitar
tablature.
<p/>
Follow the tutorial on the <a href="vextab/tutorial.html">VexTab Tutorial</a> page
to get started using VexTab.
</div>
<h2>The Code</h2>
<div class="description">
VexFlow is distributed under the MIT license, and all the code is
available at the <a href="http://github.com/0xfe/vexflow">VexFlow GitHub
Repository</a>.
<p/>
VexTab is an open specification and the reference implementation is
open source. This implementation is free for non-commercial use. See details
at the <a href="http://github.com/0xfe/vextab">VexTab GitHub
Repository</a>.
</div>
<h2>More Stuff</h2>
<div class="description">
We're always building and experimenting with new things related to music
and audio on the web. Try these out:
<p/>
<ul>
<li><a href="http://vexflow.com/vexwarp/">VexWarp</a> - An online tool for slowing down, stretching, pitch shifting, and looping music and audio. Great for practising and transcribing.</li>
<li><a href="https://chrome.google.com/webstore/detail/vexwarp/nkdmbkieeegbiockljbbebpdafnbckfj">VexWarp Chrome App</a> - An offline version of VexWarp bundled as a Google Chrome Application.</li>
<li><a href="http://vexflow.com/vexchords/">VexChords</a> - Guitar Chord charts rendered right in the browser, with source code.</li>
<li><a href="https://chrome.google.com/webstore/detail/vextab-music-notation/npcffdibegeppkebphaghnpkcjcpopjf">VexTab Chrome Extension</a>
- Paste music notation in your blog and forum posts, documents, and messages.</li>
</ul>
</div>
<h2>Stay in Touch</h2>
Keep up with changes at
<a href="http://twitter.com/11111110b">@11111110b</a>,
<a href="http://0xfe.blogspot.com">the 0xFE blog</a>, or
<a href="https://plus.google.com/111867441083313519234/posts">Google Plus</a>.
</div>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8346562-6']);
_gaq.push(['_setDomainName', 'vexflow.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>