dranke/microw8
1
0
Fork 0
mirror of https://github.com/exoticorn/microw8.git synced 2026-01-20 11:16:42 +01:00
Code Issues Projects Releases Wiki Activity

successfully reprod audio recording in firefox

Browse Source
This commit is contained in:
Dennis Ranke
2022-06-09 23:54:43 +02:00
parent 95d0d92a6f
commit e0450c9039
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/opus-repro.html
View File

@@ -1,5 +1,7 @@
<html> <html>
<button onclick="go()">Go!</button> <button onclick="go()">Go!</button>
<canvas id="screen" width="320" height="240"></canvas>
<video id="video"></video>
<script> <script>
function go() { function go() {
let audioContext = new AudioContext({sampleRate: 44100}); let audioContext = new AudioContext({sampleRate: 44100});
@@ -8,28 +10,48 @@
let gain = new GainNode(audioContext, {gain: 1}); let gain = new GainNode(audioContext, {gain: 1});
oscillator.connect(gain); oscillator.connect(gain);
gain.connect(audioContext.destination); gain.connect(audioContext.destination);
for(let i = 0; i < 4; ++i ) { for(let i = 0; i < 8; ++i ) {
gain.gain.setValueAtTime(1, i / 2); gain.gain.setValueAtTime(1, i / 2);
gain.gain.setValueAtTime(0, i / 2 + 0.3); gain.gain.setValueAtTime(0, i / 2 + 0.3);
} }
oscillator.start(); oscillator.start();
oscillator.stop(2); oscillator.stop(4);
let screen = document.getElementById('screen');
let context = screen.getContext('2d');
let startTime = Date.now();
let drawFrame = () => {
let time = Date.now() - startTime;
context.fillStyle = 'white';
context.fillRect(0, 0, 320, 240);
if(time < 4000) {
if(time % 500 < 300) {
context.fillStyle = 'black';
context.fillRect(time / 15, 50, 50, 50);
}
window.requestAnimationFrame(drawFrame);
}
};
drawFrame();
let stream = screen.captureStream();
let audioStreamNode = audioContext.createMediaStreamDestination(); let audioStreamNode = audioContext.createMediaStreamDestination();
gain.connect(audioStreamNode); gain.connect(audioStreamNode);
let recorder = new MediaRecorder(audioStreamNode.stream, { mimeType: 'audio/ogg; codecs=opus' }); stream.addTrack(audioStreamNode.stream.getAudioTracks()[0]);
let recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
let chunks = []; let chunks = [];
recorder.ondataavailable = e => chunks.push(e.data); recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => { recorder.onstop = () => {
let blob = new Blob(chunks, {type: 'audio/ogg; codecs=opus'}); let blob = new Blob(chunks, {type: 'video/webm'});
let url = URL.createObjectURL(blob); let url = URL.createObjectURL(blob);
let audio = new Audio(url); let video = document.getElementById('video');
audio.play(); video.src = url;
video.play();
}; };
recorder.start(); recorder.start();
setTimeout(() => recorder.stop(), 2000); setTimeout(() => recorder.stop(), 4000);
} }
</script> </script>
</html> </html>