music21j-port
Version:
A toolkit for computer-aided musicology, Javascript version
80 lines (75 loc) • 2.83 kB
HTML
<html><head>
<title>Stacey Canon</title>
<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" />
<script>
require(['music21'], function (music21) {
var as = music21.audioSearch;
delayNodes = [];
input = null;
audioContext = null;
numVoices = 4;
delayBeats = 8;
delayLine = function(mediaStream) {
audioContext = new AudioContext();
input = audioContext.createMediaStreamSource(mediaStream);
delayTime = delayBeats * (60.0/mn.tempo);
var lastInput = input;
for (var i = 0; i < numVoices; i++) {
delayNode = audioContext.createDelay(delayTime + 0.2);
delayNode.delayTime.value = delayTime; // 4 beat delay
lastInput.connect(delayNode);
delayNodes.push(delayNode);
delayNode.connect(audioContext.destination);
lastInput = delayNode;
}
console.log(input);
};
$('#startListening').on('click', function () {
mn.chirp();
music21.audioSearch.getUserMedia(undefined, delayLine);
});
$('#stopListening').on('click', function () {
if (input.mediaStream !== undefined && input.mediaStream.active) {
var mainTrack = input.mediaStream.getTracks()[0];
mainTrack.stop();
}
});
$('#stopPlayback').on('click', function () {
for (var i = 0; i < numVoices; i++) {
delayNodes[i].disconnect();
}
input.disconnect();
audioContext.close();
console.log('disconnected');
});
mn = new music21.tempo.Metronome();
mn.addDiv($('#metronomeDiv'));
mn.silent = true;
mn.flash = true;
console.log(mn);
});
</script>
</head>
<body style='text-align: left;'>
<div style='padding-left: 20px; background-color: white'>
<h1>A canon for Stacey</h1>
<h2>Works on Chrome and Firefox only.</h2>
<p>
<div>
<button id='startListening'>Start</button>
<button id='stopListening'>Stop Listening</button>
<button id='stopPlayback'>Stop Playback</button>
</div>
<br>
<div id="metronomeDiv"></div>
<div class="music21 tinyNotation">2/4 c4 A F E F d F G e4 e f8 f c4 d8 e f4 a8 c' b4</div>
<div class="music21 tinyNotation">2/4 c'4. b8 c'4. g8 a4. b8 c'4 d'8 d' e'8 f'16 g' a'4~ a'4 g'8 e' d'4 c' f' f' e' c'</div>
<br>
<br>
<br>
<br>
</div>
</body>
</html>