music21j-port
Version:
A toolkit for computer-aided musicology, Javascript version
54 lines (51 loc) • 1.46 kB
HTML
<html>
<head>
<script src="../ext/require/require.js" data-main="../src/music21"></script>
<style>
canvas {
display: inline-block;
background: #202020;
box-shadow: 0px 0px 10px blue;
}
</style>
<script>
audioRecorder = undefined;
require(['music21'], function(music21) {
audioRecorder = new music21.audioRecording.Recorder();
audioRecorder.initAudio();
});
var isRecording = false;
function toggleRecording() {
if (isRecording) {
console.log('stopping');
audioRecorder.stop();
isRecording = false;
audioRecorder.getBuffers( b => audioRecorder.drawWaveformCanvas(b) );
} else {
console.log('starting');
audioRecorder.clear();
audioRecorder.record();
audioRecorder.updateAnalysers();
isRecording = true;
}
}
function save() {
audioRecorder.exportWAV();
}
function playback() {
audioRecorder.getBuffers( function(b) { audioRecorder.playBuffers(b) });
}
</script>
</head>
<body>
<div>
<button onclick="toggleRecording(this)">Record</button>
<button onclick="save()">Save</button>
<a href="#" id="save">hi</a>
</div>
<div>
<canvas id="frequencyAnalyser" width="256" height="50"></canvas>
<canvas id="waveformCanvas" width="256" height="50" onclick='playback()'></canvas>
</div>
</body>
</html>