music21j-port
Version:
A toolkit for computer-aided musicology, Javascript version
88 lines (85 loc) • 3.98 kB
HTML
<html><head>
<title>HTML5 Pitch Detector</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) {
nnn = new music21.note.Note("C4");
nnn.duration.type = 'whole';
sss = new music21.stream.Stream();
sss.clef = new music21.clef.Clef('treble');
sss.append(nnn);
sss.renderOptions.scaleFactor = {x: 1.5, y: 1.5};
sss.appendNewDOM('#SVGDiv');
$('#startListening').on('click', function () { music21.audioSearch.getUserMedia() });
$('#stopListening').on('click', function () { window.cancelAnimationFrame(music21.audioSearch.animationFrameCallbackId); });
$nn = $('#noteName');
$centsDiv = $('#centsDiv');
$counter = $('#counter');
$('#bassClef').on('click', function () {
sss.clef = new music21.clef.Clef('bass');
music21.audioSearch.minFrequency = new music21.pitch.Pitch('F2').frequency;
music21.audioSearch.maxFrequency = new music21.pitch.Pitch('F4').frequency;
sss.replaceDOM();
})
$('#trebleClef').on('click', function () {
sss.clef = new music21.clef.Clef('treble');
music21.audioSearch.minFrequency = new music21.pitch.Pitch('G3').frequency;
music21.audioSearch.maxFrequency = new music21.pitch.Pitch('A5').frequency;
sss.replaceDOM();
})
var lastNote = 0;
var lastLeft = 150;
sampleCallback = function(frequency) {
var _ = music21.audioSearch.smoothPitchExtraction(frequency),
midiNum = _[0],
centsOff = _[1];
if (midiNum != -1) {
if (midiNum != lastNote) {
lastNote = midiNum;
var p = new music21.pitch.Pitch(midiNum);
var a = p.accidental;
var name = p.step;
if (a !== undefined && a.alter !== 0) {
name += "<span style='font-size: 70%; position: relative; left: -10px; margin-right: -20px'>" + a.unicodeModifier + "</span>";
}
name += p.octave.toString();
nnn.pitch = p
sss.replaceDOM();
}
// 0 = red; 120 = green; 240 = blue
var hue = ((-1 * centsOff) + 50) * 2.4;
// highly saturated at the extremes;
var saturation = Math.round(50 + 2 * Math.abs(Math.abs(centsOff) - 25));
var colorString = 'hsl(' + hue + ', ' + saturation + '%, 50%)';
var newLeft = 3*(50+centsOff);
lastLeft = (lastLeft*9 + newLeft)/10;
$counter.css('background-color', colorString)
.css('left', lastLeft.toString() + 'px');
}
};
music21.audioSearch.sampleCallback = sampleCallback;
});
</script>
</head>
<body style='text-align: left;'>
<div style='padding-left: 20px; background-color: white'>
<h1>HTML5/Music21 Audio Pitch Listener</h1>
<h2>Works on Chrome and Firefox (recent) only.</h2>
<h3>Be sure to select <b>Bass</b> or <b>Treble</b> to help guide pitch detection.</h3>
<button id='startListening'>Start Listening</button>
<button id='stopListening'>Stop Listening</button>
<button id='bassClef'>Bass</button>
<button id='trebleClef'>Treble</button>
<div id='SVGDiv' style='margin-left: 80px'></div>
<div id='counterHolder' style='position: relative; text-align: center; border: 1px solid black; width: 340px'>
<div id='counter' style='position: relative; width: 40px; background-color: white; height: 30px'> </div>
</div>
<br>
<br>
<br>
<br>
</div>
</body>
</html>