Skip to content

Instantly share code, notes, and snippets.

@wincentbalin
Last active October 31, 2018 15:19
Show Gist options
  • Save wincentbalin/7a27e5b3c8485646d236d4119848953b to your computer and use it in GitHub Desktop.
Save wincentbalin/7a27e5b3c8485646d236d4119848953b to your computer and use it in GitHub Desktop.
Convert ABC to SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>abc2svg test</title>
<style>
#output {
position: absolute;
top: 0;
right: 0
}
svg {
display: block
}
</style>
</head>
<body>
<textarea rows="20" cols="40" id="input">
%abc-2.2
%%pagewidth 12cm
%%bgcolor white
%%topspace 0
%%composerspace 0
%%leftmargin 0.8cm
%%rightmargin 0.8cm
X:1
T:Au clair de la lune
C:Unknown
M:C
L:1/4
Q:1/4=140
K:C
cccd | e2d2 | cedd | c4 :|
dddd | A2A2 | dcBA | G4 |
cccd | e2d2 | cedd | c4 ||
</textarea>
<button id="update">Update</button>
<div id="output"></div>
<script src="http://moinejf.free.fr/js/abc2svg-1.js"></script>
<script>
var input = document.getElementById('input'),
update = document.getElementById('update'),
output = document.getElementById('output'),
context= '',
user = {'img_out': function(str) {
context += str;
},
'errmsg': function(message, line_number, column_number) {
console.log('Error: ' + message + ' at '+ line_number + ',' + column_number);
},
'read_file': function(name) {
return null;
}
},
abc = new abc2svg.Abc(user);
update.addEventListener('click', function(event) {
var abc = new abc2svg.Abc(user);
context = '';
abc.tosvg(null, input.value);
output.innerHTML = context;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment