music21j-port
Version:
A toolkit for computer-aided musicology, Javascript version
125 lines (113 loc) • 4.28 kB
HTML
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- midi.js package -->
<script data-main="../src/music21" src="../ext/require/require.js"></script>
<link rel="stylesheet" href="http://web.mit.edu/music21/doc/_static/m21.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300italic,400italic,700italic,400,300,700" type="text/css" />
</head>
<body>
<script type="text/javascript">
var allStream;
require(['music21'], function() {
renderThemes();
allStreamScore = new music21.stream.Score();
allStreamScore.renderOptions.overriddenWidth = 600;
allStream = new music21.stream.Part();
allStream.renderOptions.overriddenWidth = 600;
allStreamScore.append(allStream);
var newDOM = allStreamScore.createPlayableDOM();
$('#dropDiv div').replaceWith(newDOM[0]);
});
function renderThemes() {
var themes = [
'c4 e g g',
"c'4 g2 e4",
'c2 r',
"c'4 c c' r",
"e4 g c' c'",
'g4 e8 c g4 c',
"c2. c'4",
'c4 c e8 f g4',
"c'4. e'8 c'4 g",
"d'#4 f b8 f4.",
'c4. e8 c4. g8',
"c8 c e e g g c'4",
"c4. g8 c'4 e'",
];
var themeDivs = [];
r = new music21.vfShow.Renderer(); // should be static method;
for (var i = 0; i < themes.length; i++) {
var thisTheme = themes[i];
var myTNStream = music21.tinyNotation.TinyNotation(thisTheme);
var myStream = new music21.stream.Measure();
myStream.elements = myTNStream.elements;
myStream.timeSignature = '4/4';
var nc = myStream.createPlayableDOM();
$('#themeDiv').append(nc);
// here is where we create something!
nc
.draggable({
containment: 'body',
stack: '#themeDiv .streamHolding',
cursor: 'move',
revert: true,
})
.data('stream', myStream);
nc[0].ondblclick = nc[0].onclick; // not working right now...
nc[0].onclick = undefined;
themeDivs.push(nc[0]);
r.removeFormatterInformation(myStream, true); // recursive.
if (i % 4 == 3) {
$('#themeDiv').append($('<br/>'));
// alert(nc);
}
}
$('body').append($('<br/>'));
$('#dropDiv').droppable({
accept: '#themeDiv .streamHolding',
hoverClass: 'hovered',
drop: handleThemeDrop,
});
// themeDivs[0].style.display = 'none';
}
function handleThemeDrop(event, ui) {
var containedStream = ui.draggable.data('stream');
var containedStreamCopy = containedStream.clone(true);
allStream.append(containedStreamCopy);
allStreamScore.resetRenderOptions(true); // recursive
for (var i = 0; i < allStream.length; i++) {
if (i % 4 == 3) {
allStream.get(i).renderOptions.rightBarline = 'double';
}
}
var $svgDiv = allStreamScore.createPlayableDOM();
$('#dropDiv .streamHolding').replaceWith($svgDiv[0]);
// alert(allStream.hi);
}
function clearScore() {
allStream.elements = [];
var $newSVG = allStreamScore.createPlayableDOM();
$('#dropDiv .streamHolding').replaceWith($newSVG[0]);
}
function undoAdd() {
allStream.elements = allStream.elements.slice(0, allStream.length - 1);
var $newSVG = allStreamScore.createPlayableDOM();
$('#dropDiv .streamHolding').replaceWith($newSVG[0]);
}
</script>
<h1>Click me to play!</h1>
<div id="dragContent">
<div id="themeDiv"></div>
<div id="dropDiv" height="800" width="1200">
<h1>Create an 8-measure piece by dropping fragments here! <br/>Go for a smooth pattern. Then click here to play your score.</h1>
<button onclick="clearScore()">Clear</button> ... <button onclick="undoAdd()">Undo</button><br></br>
<div style="text-align: left">
<div id="dropSvg" class='streamHolding' height=200 width=1000><svg></svg></div>
</div>
</div>
</div>
<h2>If you've done that well, hit clear and try to create a 16-measure piece with these fragments.</h2>
</body>
</html>