wincentbalin/abc2svg.html

## abc2svg.html
<!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>
	<!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>