123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- // 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();
- }
- }
|