// detto - cesco@ventuordici.org - 2020 /* 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(); } }