music21j-port
Version:
A toolkit for computer-aided musicology, Javascript version
77 lines (70 loc) • 2.4 kB
HTML
<html>
<head>
<title>XY Location!</title>
<!-- for MSIE 10 on Windows 8 -->
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<script data-main="../src/music21.js" src="../ext/require/require.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
require(['music21'], function() {
var s1 = music21.tinyNotation.TinyNotation(
"4/4 c2 d#4 e8 f g4 r8 B c4~ c16 d32 e f g a b c'1 b4 a g f e8 f e d c4 B c1"
);
var m = s1.elements[0];
m.elements.pop();
var c = new music21.chord.Chord(['F4', 'A-4', 'C5']);
c.duration.type = 'eighth';
m.append(c);
var s2 = music21.tinyNotation.TinyNotation(
'4/4 E2 F#4 G8 r trip{G8 F A} G4 E2~ E1 B4 c B A G8 A G F E4 D C1'
);
s = new music21.stream.Score();
s.insert(0, s1);
s.insert(0, s2);
s.tempo = 90;
var g = music21.tinyNotation.TinyNotation(
"4/4 c2 d#4 e8 f g4 r8 B c4~ c16 d32 e f g a b c'1 b4 a g f e8 f e d c4 B c1"
);
g.renderOptions.events['click'] = function(e) {
// this = SVG div...
var _ = g.findNoteForClick(this, e);
var dNN = _[0];
var n = _[1];
console.log(dNN);
console.log(n);
};
g.appendNewDOM();
music21.miditools.loadSoundfont('acoustic_grand_piano', function() {
var $svg = $('#svg');
$svg.append(s1.get(0).editableAccidentalDOM());
console.log('soundfont loaded');
console.log(s.estimateStreamHeight());
$svg.mousemove(function(e) {
var allSVG = $(this).find('svg');
if (allSVG.length > 0) {
var $cThis = $(allSVG[0]);
var offset = $cThis.offset();
$('#xLoc').val(e.pageX);
$('#yLoc').val(e.pageY);
$('#xOff').val(e.pageX - offset.left);
$('#yOff').val(e.pageY - offset.top);
}
});
});
});
</script>
<style>
#svg { background-color: #ffffaa }
.streamHolding { background-color: #aaffff }
</style>
</head>
<body>
<div id='svg'></div>
<div>
X: <input type="text" name="xLoc" id="xLoc" value="0"/>
Y: <input type="text" name="yLoc" id="yLoc" value="0"/>
X-left: <input type="text" name="xOff" id="xOff" value="0"/>
Y-top: <input type="text" name="yOff" id="yOff" value="0"/>
</div>
</body>
</html>