145 lines
4.1 KiB
JavaScript
145 lines
4.1 KiB
JavaScript
// detto - cesco@ventuordici.org - 2020
|
|
/**
|
|
*
|
|
* @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0
|
|
*/
|
|
|
|
/* THE CHINOTTO-WARE LICENSE" (Revision 42):
|
|
* cesco@ventuordici.org wrote this code.
|
|
* As long as you retain this notice you can do whatever you want with this stuff.
|
|
* I reserve the right to do the absolute minimum provided by law, up to and including absolutely nothing.
|
|
* If we meet some day, and you think this stuff is worth it, you can buy me a chinotto in return.
|
|
*/
|
|
|
|
var audioCtx;
|
|
const canvas = document.querySelector('.visualizer');
|
|
canvasCtx = canvas.getContext("2d");
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if(window.location.hash) {
|
|
document.getElementById('visualizer').style.display = 'none';
|
|
document.getElementById('record_audio').style.display = 'none';
|
|
document.getElementById('url').style.display = 'none';
|
|
document.getElementById('stop_record').style.display = 'none';
|
|
|
|
var downloadbutton = document.getElementById('download');
|
|
if (downloadbutton) { downloadbutton.addEventListener('click', content_download, false); }
|
|
} else {
|
|
document.getElementById('player').style.display = 'none';
|
|
document.getElementById('download').style.display = 'none';
|
|
var recordbutton = document.getElementById('record_audio');
|
|
if (recordbutton) {
|
|
recordbutton.addEventListener('click', processa_audio, false);
|
|
}
|
|
|
|
var stopbutton = document.getElementById('stop_record');
|
|
if (stopbutton) { stopbutton.addEventListener('click', stop_recorder, false); }
|
|
}
|
|
}, false);
|
|
|
|
function processa_audio(){
|
|
filename = "";
|
|
fileext = ".webm";
|
|
var constraints = { audio: true };
|
|
var options = {
|
|
audioBitsPerSecond : 64000,
|
|
mimeType : 'audio/webm;codecs=opus'
|
|
}
|
|
audioCtx = new AudioContext();
|
|
|
|
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
|
|
$('body').trigger('recording-start-ok')
|
|
window.localStream = stream;
|
|
const recorder = new MediaRecorder(stream, options);
|
|
window.localRecorder = recorder;
|
|
console.log("creato recorder " + recorder );
|
|
visualize(stream);
|
|
const chunks = [];
|
|
|
|
recorder.ondataavailable = function(e) {
|
|
// console.log("aggiungo chunk");
|
|
chunks.push(e.data);
|
|
}
|
|
|
|
recorder.onstop = function(e) {
|
|
console.log("stoppato recorder");
|
|
const blob = new Blob(chunks, { type: 'audio/webm' });
|
|
var reader = new FileReader();
|
|
reader.onload = function(event) {
|
|
console.log("reader loaded");
|
|
var content = event.target.result;
|
|
$('body').trigger('recording-stop-ready', content)
|
|
}
|
|
reader.readAsArrayBuffer(blob);
|
|
}
|
|
recorder.start(1000);
|
|
|
|
}).catch(function onMicDenied(err) {
|
|
console.log('ouch!', err)
|
|
$('body').trigger('recording-start-fail', err)
|
|
});
|
|
}
|
|
|
|
function stop_recorder(stream){
|
|
console.log("stopping");
|
|
localRecorder.stop();
|
|
localStream.getAudioTracks()[0].stop();
|
|
localStream.getTracks().forEach(track => track.stop());
|
|
}
|
|
|
|
function visualize(stream) {
|
|
console.log("start visualize");
|
|
|
|
if(!audioCtx) {
|
|
audioCtx = new AudioContext();
|
|
console.log("creating audioctx" + audioCtx);
|
|
}
|
|
|
|
const source = audioCtx.createMediaStreamSource(stream);
|
|
|
|
const analyser = audioCtx.createAnalyser();
|
|
console.log("created analyser" + analyser);
|
|
|
|
analyser.fftSize = 2048;
|
|
const bufferLength = analyser.frequencyBinCount;
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
|
|
source.connect(analyser);
|
|
draw()
|
|
|
|
function draw() {
|
|
// console.log("start draw");
|
|
WIDTH = canvas.width
|
|
HEIGHT = canvas.height;
|
|
|
|
requestAnimationFrame(draw);
|
|
analyser.getByteTimeDomainData(dataArray);
|
|
|
|
canvasCtx.fillStyle = 'rgb(255, 255, 255)';
|
|
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
|
|
canvasCtx.lineWidth = 2;
|
|
canvasCtx.strokeStyle = 'rgb(150, 0, 0)';
|
|
|
|
canvasCtx.beginPath();
|
|
|
|
let sliceWidth = WIDTH * 1.0 / bufferLength;
|
|
let x = 0;
|
|
|
|
|
|
for(let i = 0; i < bufferLength; i++) {
|
|
|
|
let v = dataArray[i] / 128.0;
|
|
let y = v * HEIGHT/2;
|
|
|
|
if(i === 0) {
|
|
canvasCtx.moveTo(x, y);
|
|
} else {
|
|
canvasCtx.lineTo(x, y);
|
|
}
|
|
x += sliceWidth;
|
|
}
|
|
|
|
canvasCtx.lineTo(canvas.width, canvas.height/2);
|
|
canvasCtx.stroke();
|
|
}
|
|
}
|