music21j-port
Version:
A toolkit for computer-aided musicology, Javascript version
207 lines (176 loc) • 7.87 kB
HTML
<html>
<head>
<title>music21j -- keyboard test</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>
var m; // will become Measure object soon...
var m1; // will become Measure object soon...
var m2; // will become Measure object soon...
var p; // will become Part object soon...
var p1; // will become lower Part object soon...
var p2; // will become lower Part object soon...
var sc; // will become Score object soon.
var metro; // will become Metronome object soon...
function appendElement(appendObject) {
appendObject = appendObject.clone();
if (m.length > 0) {
m.elements = m.elements.slice(1)
}
if (music21.miditools.transposeOctave >= 1 && m.clef.name == 'bass') {
m.clef = new music21.clef.TrebleClef();
}
if (music21.miditools.transposeOctave < 0 && m.clef.name == 'treble') {
m.clef = new music21.clef.BassClef();
}
appendObject.stemDirection = undefined;
appendObject.duration.type = "whole";
appendObject.duration.dots = 0;
m.append(appendObject);
var $svgDiv = $("#svgDiv");
$svgDiv.empty();
var svg = p.appendNewDOM($svgDiv);
}
function separatePitches(pitchList) {
var treblePitches = [];
var bassPitches = [];
for (var i = 0; i < pitchList.length; i++) {
var p = pitchList[i];
if (p.ps >= 60) {
treblePitches.push(p);
} else {
bassPitches.push(p);
}
}
return [treblePitches, bassPitches];
}
function appendElementGrandStaff(appendChord) {
var pitchList;
if (appendChord.isChord) {
pitchList = appendChord.pitches;
} else {
pitchList = [appendChord.pitch]; // note Object
}
var separatedPitches = separatePitches(pitchList);
var treblePitches = separatedPitches[0];
var bassPitches = separatedPitches[1];
var trebleChordOrRest;
if (treblePitches.length > 0) {
trebleChordOrRest = new music21.chord.Chord(treblePitches);
// trebleChordOrRest.stemDirection = 'up';
} else {
trebleChordOrRest = new music21.note.Rest();
}
trebleChordOrRest.duration.type = 'whole';
var bassChordOrRest;
if (bassPitches.length > 0) {
bassChordOrRest = new music21.chord.Chord(bassPitches);
// bassChordOrRest.stemDirection = 'up';
} else {
bassChordOrRest = new music21.note.Rest();
}
bassChordOrRest.duration.type = 'whole';
if (m1.length > 0) {
m1.elements = m1.elements.slice(1)
}
if (m2.length > 0) {
m2.elements = m2.elements.slice(1)
}
m1.append(trebleChordOrRest);
m2.append(bassChordOrRest)
var $svgDiv = $("#svgDivGrandStaff");
$svgDiv.empty();
var svg = sc.appendNewDOM($svgDiv);
}
require(['music21'], function () {
p = new music21.stream.Part();
// p.renderOptions.width = 500;
m = new music21.stream.Measure();
p.insert(0, m);
m.clef = new music21.clef.TrebleClef();
p.renderOptions.scaleFactor = {x: 1.5, y: 1.5};
// GrandStaff
p1 = new music21.stream.Part();
m1 = new music21.stream.Measure();
p1.insert(0, m1);
m1.clef = new music21.clef.TrebleClef();
p2 = new music21.stream.Part();
m2 = new music21.stream.Measure();
p2.insert(0, m2);
m2.clef = new music21.clef.BassClef();
sc = new music21.stream.Score();
sc.insert(0, p1);
sc.insert(0, p2);
sc.partSpacing = 90;
sc.renderOptions.scaleFactor = {x: 1.5, y: 1.5};
metro = new music21.tempo.Metronome();
// metro.addDiv($("#metronomeDiv"));
music21.miditools.metronome = metro;
k = new music21.keyboard.Keyboard();
k.showNames = true;
k.scaleFactor = 2.0;
k.startPitch = 22;
k.endPitch = k.startPitch + 14;
k.scrollable = true;
k.hideable = true;
var $kd = $('#keyboardDiv');
k.appendKeyboard($kd); // 25key keyboard
var playSound = true;
music21.miditools.maxDelay = 200;
var midiCallbacksPlay = [music21.miditools.makeChords,
music21.miditools.sendToMIDIjs,
music21.keyboard.jazzHighlight.bind(k)];
var midiCallbacksNoPlay = [music21.miditools.makeChords,
music21.keyboard.jazzHighlight.bind(k)];
music21.webmidi.createSelector($("#putMidiSelectHere"));
music21.miditools.callBacks.general = midiCallbacksPlay;
$('#markC').bind('click', function () { k.markC = this.checked; k.redrawSVG() })
$('#showNames').bind('click', function () { k.showNames = this.checked; k.redrawSVG() })
$('#showOctaves').bind('click', function () { k.showOctaves = this.checked; k.redrawSVG() })
$('#playSound').bind('click', function() {
if (this.checked) {
music21.miditools.callBacks.general = midiCallbacksPlay;
} else {
music21.miditools.callBacks.general = midiCallbacksNoPlay;
}
});
$('input[type=radio][name=staffNumberSelector]').change(function() {
if (this.value == 'singleStaff') {
$("#svgDiv").css('display', 'block');
$("#svgDivGrandStaff").css('display', 'none');
music21.miditools.callBacks.sendOutChord = appendElement;
}
else if (this.value == 'grandStaff') {
$("#svgDiv").css('display', 'none');
$("#svgDivGrandStaff").css('display', 'block');
music21.miditools.callBacks.sendOutChord = appendElementGrandStaff;
} else {
console.log("What value is this? " + this.value);
}
}).trigger('change');
});
</script>
</head>
<body>
<div style='text-align: center; font-size: 8pt'>
Show note names: <input type='checkbox' checked id='showNames'/> ·
Show octaves: <input type='checkbox' id='showOctaves'/> ·
Play sound: <input type='checkbox' checked id='playSound'/> ·
Mark middle C: <input type='checkbox' checked id='markC'/> ·
<span id="staffSelect">
<input type="radio" name="staffNumberSelector" value="singleStaff">Single Staff
<input type="radio" checked name="staffNumberSelector" value="grandStaff">Grand Staff
</span> ·
MIDI Input: <span id="putMidiSelectHere"></span>
</div>
<div> </div>
<div style='text-align: center' id='keyboardDiv'></div>
<div> </div>
<div id="svgDiv" style='text-align: center' class='streamHolding'>
</div>
<div id="svgDivGrandStaff" style='text-align: center' class='streamHolding'>
</div>
</body>
</html>