123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- /* global Recorder */
- //webkitURL is deprecated but nevertheless
- URL = window.URL || window.webkitURL;
- var gumStream; //stream from getUserMedia()
- var rec;
- var input; //MediaStreamAudioSourceNode we'll be recording
- // shim for AudioContext when it's not avb.
- var AudioContext = window.AudioContext || window.webkitAudioContext;
- var audioContext //audio context to help us record
- var recordButton = document.getElementById("recordButton");
- var stopButton = document.getElementById("stopButton");
- var pauseButton = document.getElementById("pauseButton");
- //add events to those 2 buttons
- recordButton.addEventListener("click", startRecording);
- stopButton.addEventListener("click", stopRecording);
- pauseButton.addEventListener("click", pauseRecording);
- function startRecording() {
- console.log("recordButton clicked");
- console.log(rec)
- /*
- Simple constraints object, for more advanced audio features see
- https://addpipe.com/blog/audio-constraints-getusermedia/
- */
- var constraints = { audio: true, video:false }
- /*
- Disable the record button until we get a success or fail from getUserMedia()
- */
- recordButton.disabled = true;
- stopButton.disabled = false;
- pauseButton.disabled = false
- /*
- We're using the standard promise based getUserMedia()
- https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
- */
- navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
- console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
- /*
- create an audio context after getUserMedia is called
- sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
- the sampleRate defaults to the one set in your OS for your playback device
- */
- audioContext = new AudioContext();
- //update the format
- document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
- /* assign to gumStream for later use */
- gumStream = stream;
- /* use the stream */
- input = audioContext.createMediaStreamSource(stream);
- /*
- Create the Recorder object and configure to record mono sound (1 channel)
- Recording 2 channels will double the file size
- */
- rec = new Recorder(input,{numChannels:1})
- //start the recording process
- rec.record()
- console.log("Recording started");
- }).catch(function(err) {
- //enable the record button if getUserMedia() fails
- recordButton.disabled = false;
- stopButton.disabled = true;
- pauseButton.disabled = true
- });
- }
- function pauseRecording(){
- console.log("pauseButton clicked rec.recording=",rec.recording );
- if (rec.recording){
- //pause
- rec.stop();
- pauseButton.innerHTML="Riprendi";
- }else{
- //resume
- rec.record()
- pauseButton.innerHTML="Pausa";
- }
- }
- function stopRecording() {
- console.log("stopButton clicked");
- //disable the stop button, enable the record too allow for new recordings
- stopButton.disabled = true;
- recordButton.disabled = false;
- pauseButton.disabled = true;
- //reset button just in case the recording is stopped while paused
- pauseButton.innerHTML="Pausa";
-
- //tell the recorder to stop the recording
- rec.stop();
- //stop microphone access
- gumStream.getAudioTracks()[0].stop();
- //create the wav blob and pass it on to createDownloadLink
- rec.exportWAV(createDownloadLink)
- }
- function createDownloadLink(blob) {
-
- console.log(blob)
- var url = URL.createObjectURL(blob);
- var au = document.createElement('audio');
- var li = document.createElement('li');
- var link = document.createElement('a');
- //name of .wav file to use during upload and download (without extendion)
- var filename = new Date().toISOString();
- //add controls to the <audio> element
- au.controls = true;
- au.src = url;
- //save to disk link
- link.classList.add('button')
- link.href = url;
- link.download = filename+".wav"; //download forces the browser to donwload the file using the filename
- link.innerHTML = "Salva file su disco";
- //add the new audio element to li
- li.appendChild(au)
-
- //add the filename to the li
- li.appendChild(document.createTextNode(filename+".wav"))
- //add the save to disk link to li
- li.appendChild(link);
-
- //upload link
- var upload = document.createElement('a');
- upload.classList.add('button')
- upload.href="#";
- upload.innerHTML = "Upload";
- upload.addEventListener("click", function(event){
- var xhr =new XMLHttpRequest();
- xhr.onload=function(e) {
- if(this.readyState === 4) {
- console.log("Server returned: ",e.target.responseText);
- }
- };
- var fd=new FormData();
- fd.append("audio_data",blob, filename);
- xhr.open("POST","upload/" + $('body').data('site'),true);
- xhr.send(fd);
- })
- li.appendChild(document.createTextNode (" "))//add a space in between
- li.appendChild(upload)//add the upload link to li
- //add the li element to the ol
- recordingsList.appendChild(li);
- }
|