forked from 0xfe/vexflow
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (130 loc) · 6.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<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>