<script> var startRecordingButton = document.getElementById("startRecordingButton"); var stopRecordingButton = document.getElementById("stopRecordingButton"); var playButton = document.getElementById("playButton"); var downloadButton = document.getElementById("downloadButton");
var leftchannel = []; var rightchannel = []; var recorder = null; var recordingLength = 0; var volume = null; var mediaStream = null; var sampleRate = 44100; var context = null; var blob = null;
// creates the audio context window.AudioContext = window.AudioContext || window.webkitAudioContext; context = new AudioContext();
// creates an audio node from the microphone incoming stream mediaStream = context.createMediaStreamSource(e);
// https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createScriptProcessor // bufferSize: the onaudioprocess event is called when the buffer is full var bufferSize = 2048; var numberOfInputChannels = 2; var numberOfOutputChannels = 2; if (context.createScriptProcessor) { recorder = context.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels); } else { recorder = context.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels); }
// we flat the left and right channels down // Float32Array[] => Float32Array var leftBuffer = flattenArray(leftchannel, recordingLength); var rightBuffer = flattenArray(rightchannel, recordingLength); // we interleave both channels together // [left[0],right[0],left[1],right[1],...] var interleaved = interleave(leftBuffer, rightBuffer);
var buffer = new ArrayBuffer(44 + interleaved.length * 2); var view = new DataView(buffer);
// write the PCM samples var index = 44; var volume = 1; for (var i = 0; i < interleaved.length; i++) { view.setInt16(index, interleaved[i] * (0x7FFF * volume), true); index += 2; }
blob = new Blob([view], { type: 'audio/wav' }); });
playButton.addEventListener("click", function (){ if (blob == null) { return; }
var url = window.URL.createObjectURL(blob); var audio = new Audio(url); audio.play(); });
downloadButton.addEventListener("click", function (){ if (blob == null) { return; }
var url = URL.createObjectURL(blob);
var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = url; a.download = "Nouvel Enregistrement.mp3"; a.click(); window.URL.revokeObjectURL(url); });
function flattenArray(channelBuffer, recordingLength) { var result = new Float32Array(recordingLength); var offset = 0; for (var i = 0; i < channelBuffer.length; i++) { var buffer = channelBuffer[i]; result.set(buffer, offset); offset += buffer.length; } return result; }
function interleave(leftChannel, rightChannel) { var length = leftChannel.length + rightChannel.length; var result = new Float32Array(length);
var inputIndex = 0;
for (var index = 0; index < length;) { result[index++] = leftChannel[inputIndex]; result[index++] = rightChannel[inputIndex]; inputIndex++; } return result; }
function writeUTFBytes(view, offset, string) { for (var i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)); } }
</script>
A voir également:
Afficher image ou la remplacer par une autre selon l'état d'une variable en JS ?