UNPKG

vexflow

Version:

A JavaScript library for rendering music notation and guitar tablature

149 lines (130 loc) 6.38 kB
<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>