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

add audio track to recorded video

Browse Source
This commit is contained in:
dranke committed 2022-04-24 23:17:58 +02:00
1 parent 2bf8938183
commit 4dd8c3b029
2 files changed
+18 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/run-web.html
+1 -1
View File
@@ -1 +1 @@
<!doctype html><html><head><meta charset="utf8"><title>uw8-run</title><style>body,canvas,html{background-color:#202024;margin:0;padding:0}body,html{height:100%}body{display:grid;grid-template-rows:1fr}#screen{align-self:center;border:4px solid #303040;image-rendering:pixelated;justify-self:center}#message{background-color:rgba(0,0,0,.4);color:#c64;font:700 12pt sans-serif;padding:8px;position:absolute;width:calc(100% - 16px);z-index:2}@media (min-width:648px) and (min-height:488px){#screen{height:480px;width:640px}}@media (min-width:968px) and (min-height:728px){#screen{height:720px;width:960px}}</style></head><body> <canvas id="screen" width="320" height="240" tabindex="1"> </canvas> <div id="message"></div> </body><script type="module">function e(e){return e&&e.__esModule?e.default:e}class t extends AudioWorkletNode{constructor(e){super(e,"apu",{outputChannelCount:[2]})}}let A=(...e)=>new Uint8Array(...e),a=(...e)=>new Uint32Array(...e);let B=function(B,s={}){s.setMessage||(s.setMessage=(e,t)=>{t&&console.log("error: "+t)});let r,o,n,i,l=B.getContext("2d"),d=l.createImageData(320,240),F=s.devkitMode,D=0,f=null==s.keyboardElement?B:s.keyboardElement;if(f){let e=e=>{let t,A="keydown"==e.type;switch(e.code){case"ArrowUp":t=1;break;case"ArrowDown":t=2;break;case"ArrowLeft":t=4;break;case"ArrowRight":t=8;break;case"KeyZ":t=16;break;case"KeyX":t=32;break;case"KeyA":t=64;break;case"KeyS":t=128;break;case"KeyR":A&&u(o,!0);break;case"F9":A&&B.toBlob((e=>{w(e,".png")})),e.preventDefault();break;case"F10":A&&function(){if(n)return n.stop(),void(n=null);n=new MediaRecorder(B.captureStream(),{mimeType:"video/webm",videoBitsPerSecond:25e6});let e=[];n.ondataavailable=t=>{e.push(t.data)};let t=s.timerElement;t&&(t.hidden=!1,t.innerText="00:00");function A(){if(i){if(t){let e=Math.floor((Date.now()-i)/1e3);t.innerText=Math.floor(e/60).toString().padStart(2,"0")+":"+(e%60).toString().padStart(2,"0")}setTimeout(A,1e3)}}n.onstop=()=>{t&&(t.hidden=!0),w(new Blob(e,{type:"video/webm"}),".webm")},n.start(),i=Date.now(),setTimeout(A,1e3)}(),e.preventDefault()}A?D|=t:D&=~t};f.onkeydown=e,f.onkeyup=e}async function u(n,i){r&&(r(),r=null);let f=new AudioContext({sampleRate:44100}),w=!0,c=new AbortController;r=()=>{f.close(),w=!1,c.abort()};let g=n.byteLength;if(s.setMessage(g),0==g)return;await f.audioWorklet.addModule(e("data:application/javascript,let%20e%3D%28...e%29%3D%3Enew%20Uint8Array%28...e%29%3Bclass%20t%20extends%20AudioWorkletProcessor%7Bconstructor%28%29%7Bsuper%28%29%2Cthis.sampleIndex%3D0%2Cthis.port.onmessage%3Dt%3D%3E%7Bthis.memory%3FisNaN%28t.data%29%3Fe%28this.memory.buffer%2C80%2C32%29.set%28e%28t.data%29%29%3Athis.startTime%3Dt.data%3Athis.load%28t.data%5B0%5D%2Ct.data%5B1%5D%29%7D%7Dasync%20load%28e%2Ct%29%7Blet%20s%3Dnew%20WebAssembly.Memory%28%7Binitial%3A4%2Cmaximum%3A4%7D%29%2Ca%3D%7Benv%3A%7Bmemory%3As%7D%7D%3Bfor%28let%20e%20of%5B%22acos%22%2C%22asin%22%2C%22atan%22%2C%22atan2%22%2C%22cos%22%2C%22exp%22%2C%22log%22%2C%22sin%22%2C%22tan%22%2C%22pow%22%5D%29a.env%5Be%5D%3DMath%5Be%5D%3Bfor%28let%20e%3D9%3Be%3C64%3B%2B%2Be%29a.env%5B%22reserved%22%2Be%5D%3D%28%29%3D%3E%7B%7D%3Bfor%28let%20e%3D0%3Be%3C16%3B%2B%2Be%29a.env%5B%22g_reserved%22%2Be%5D%3D0%3Blet%20r%3Dasync%20e%3D%3E%28await%20WebAssembly.instantiate%28e%2Ca%29%29.instance%2Ci%3Dawait%20r%28e%29%3Bfor%28let%20e%20in%20i.exports%29a.env%5Be%5D%3Di.exports%5Be%5D%3Blet%20n%3Dawait%20r%28t%29%3Bthis.memory%3Ds%2Cthis.snd%3Dn.exports.snd%7C%7Ci.exports.gesSnd%2Cthis.port.postMessage%282%29%7Dprocess%28e%2Ct%2Cs%29%7Bif%28this.snd%26%26this.startTime%29%7Bnew%20Uint32Array%28this.memory.buffer%29%5B16%5D%3DDate.now%28%29-this.startTime%3Blet%20e%3Dt%5B0%5D%2Cs%3Dthis.sampleIndex%2Ca%3De%5B0%5D.length%3Bfor%28let%20t%3D0%3Bt%3Ca%3B%2B%2Bt%29e%5B0%5D%5Bt%5D%3Dthis.snd%28s%2B%2B%29%2Ce%5B1%5D%5Bt%5D%3Dthis.snd%28s%2B%2B%29%3Bthis.sampleIndex%3D4294967295%26s%7Dreturn%210%7D%7DregisterProcessor%28%22apu%22%2Ct%29%3B"));let C,m=new t(f),Q=0,y=new Promise((e=>C=e)),E=e=>{Q|=e,3==Q&&C&&(C(!0),C=null)},I=()=>{"suspended"==f.state?(s.startButton&&(s.startButton.style="",B.style="display:none"),(s.startButton||B).onclick=()=>{f.resume()}):(s.startButton&&(s.startButton.style="display:none",B.style=""),E(1))};f.onstatechange=I,I(),o=n;let b=window.location.pathname;if(g<=1024&&!i){let e="";for(let t of A(n))e+=String.fromCharCode(t);b+="#"+btoa(e),b!=window.location.pathname+window.location.hash&&history.pushState(null,null,b)}B.width=B.width;try{let t={initial:4};F||(t.maximum=4);let B,r=new WebAssembly.Memory(t),i=A(r.buffer),C={env:{memory:r}},Q=e=>{if(B&&(!F||0!=A(e)[0])){i.set(A(e));let t=B.exports.load_uw8(e.byteLength);e=new ArrayBuffer(t),A(e).set(i.slice(0,t))}return e},I=async e=>(await WebAssembly.instantiate(e,C)).instance,b=async e=>Q(await(await fetch(e)).arrayBuffer());B=await I(await b(e("data:application/wasm;base64,AGFzbQEAAAABFQRgAX8Bf2ACf38Bf2ADf39%2FAGAAAAIPAQNlbnYGbWVtb3J5AgAEAwkIAAABAgEAAAMGEAN%2FAUEAC38BQQALfwFBAAsHGQIIbG9hZF91dzgAAAp1bmLine truncated
<!doctype html><html><head><meta charset="utf8"><title>uw8-run</title><style>body,canvas,html{background-color:#202024;margin:0;padding:0}body,html{height:100%}body{display:grid;grid-template-rows:1fr}#screen{align-self:center;border:4px solid #303040;image-rendering:pixelated;justify-self:center}#message{background-color:rgba(0,0,0,.4);color:#c64;font:700 12pt sans-serif;padding:8px;position:absolute;width:calc(100% - 16px);z-index:2}@media (min-width:648px) and (min-height:488px){#screen{height:480px;width:640px}}@media (min-width:968px) and (min-height:728px){#screen{height:720px;width:960px}}</style></head><body> <canvas id="screen" width="320" height="240" tabindex="1"> </canvas> <div id="message"></div> </body><script type="module">function e(e){return e&&e.__esModule?e.default:e}class t extends AudioWorkletNode{constructor(e){super(e,"apu",{outputChannelCount:[2]})}}let A=(...e)=>new Uint8Array(...e),a=(...e)=>new Uint32Array(...e);let B=function(B,s={}){s.setMessage||(s.setMessage=(e,t)=>{t&&console.log("error: "+t)});let r,o,n,i,l,d,F,D,f=B.getContext("2d"),u=f.createImageData(320,240),c=s.devkitMode,w=0,g=null==s.keyboardElement?B:s.keyboardElement;if(g){let e=e=>{let t,A="keydown"==e.type;switch(e.code){case"ArrowUp":t=1;break;case"ArrowDown":t=2;break;case"ArrowLeft":t=4;break;case"ArrowRight":t=8;break;case"KeyZ":t=16;break;case"KeyX":t=32;break;case"KeyA":t=64;break;case"KeyS":t=128;break;case"KeyR":A&&m(o,!0);break;case"F9":A&&B.toBlob((e=>{C(e,".png")})),e.preventDefault();break;case"F10":A&&function(){if(l)return l.stop(),l=null,F.disconnect(D),F=null,void(D=null);let e=B.captureStream();D=n.createMediaStreamDestination(),F=i,i.connect(D),e.addTrack(D.stream.getAudioTracks()[0]),l=new MediaRecorder(e,{mimeType:"video/webm",videoBitsPerSecond:25e6});let t=[];l.ondataavailable=e=>{t.push(e.data)};let A=s.timerElement;A&&(A.hidden=!1,A.innerText="00:00");function a(){if(d){if(A){let e=Math.floor((Date.now()-d)/1e3);A.innerText=Math.floor(e/60).toString().padStart(2,"0")+":"+(e%60).toString().padStart(2,"0")}setTimeout(a,1e3)}}l.onstop=()=>{A&&(A.hidden=!0),C(new Blob(t,{type:"video/webm"}),".webm")},l.start(),d=Date.now(),setTimeout(a,1e3)}(),e.preventDefault()}A?w|=t:w&=~t};g.onkeydown=e,g.onkeyup=e}async function m(l,d){r&&(r(),r=null),n=new AudioContext({sampleRate:44100});let F=!0,D=new AbortController;r=()=>{n.close(),F=!1,D.abort()};let g=l.byteLength;if(s.setMessage(g),0==g)return;await n.audioWorklet.addModule(e("data:application/javascript,let%20e%3D%28...e%29%3D%3Enew%20Uint8Array%28...e%29%3Bclass%20t%20extends%20AudioWorkletProcessor%7Bconstructor%28%29%7Bsuper%28%29%2Cthis.sampleIndex%3D0%2Cthis.port.onmessage%3Dt%3D%3E%7Bthis.memory%3FisNaN%28t.data%29%3Fe%28this.memory.buffer%2C80%2C32%29.set%28e%28t.data%29%29%3Athis.startTime%3Dt.data%3Athis.load%28t.data%5B0%5D%2Ct.data%5B1%5D%29%7D%7Dasync%20load%28e%2Ct%29%7Blet%20s%3Dnew%20WebAssembly.Memory%28%7Binitial%3A4%2Cmaximum%3A4%7D%29%2Ca%3D%7Benv%3A%7Bmemory%3As%7D%7D%3Bfor%28let%20e%20of%5B%22acos%22%2C%22asin%22%2C%22atan%22%2C%22atan2%22%2C%22cos%22%2C%22exp%22%2C%22log%22%2C%22sin%22%2C%22tan%22%2C%22pow%22%5D%29a.env%5Be%5D%3DMath%5Be%5D%3Bfor%28let%20e%3D9%3Be%3C64%3B%2B%2Be%29a.env%5B%22reserved%22%2Be%5D%3D%28%29%3D%3E%7B%7D%3Bfor%28let%20e%3D0%3Be%3C16%3B%2B%2Be%29a.env%5B%22g_reserved%22%2Be%5D%3D0%3Blet%20r%3Dasync%20e%3D%3E%28await%20WebAssembly.instantiate%28e%2Ca%29%29.instance%2Ci%3Dawait%20r%28e%29%3Bfor%28let%20e%20in%20i.exports%29a.env%5Be%5D%3Di.exports%5Be%5D%3Blet%20n%3Dawait%20r%28t%29%3Bthis.memory%3Ds%2Cthis.snd%3Dn.exports.snd%7C%7Ci.exports.gesSnd%2Cthis.port.postMessage%282%29%7Dprocess%28e%2Ct%2Cs%29%7Bif%28this.snd%26%26this.startTime%29%7Bnew%20Uint32Array%28this.memory.buffer%29%5B16%5D%3DDate.now%28%29-this.startTime%3Blet%20e%3Dt%5B0%5D%2Cs%3Dthis.sampleIndex%2Ca%3De%5B0%5D.length%3Bfor%28let%20t%3D0%3Bt%3Ca%3B%2B%2Bt%29e%5B0%5D%5Bt%5D%3Dthis.snd%28s%2B%2B%29%2Ce%5B1%5D%5Bt%5D%3Dthis.snd%28s%2B%2B%29%3Bthis.sampleIndex%3D4294967295%26s%7Dreturn%210%7D%7DregisterProcessor%28%22apu%22%2Ct%29%3B")),i=new t(n);let C,Q=0,y=new Promise((e=>C=e)),E=e=>{Q|=e,3==Q&&C&&(C(!0),C=null)},I=()=>{"suspended"==n.state?(s.startButton&&(s.startButton.style="",B.style="display:none"),(s.startButton||B).onclick=()=>{n.resume()}):(s.startButton&&(s.startButton.style="display:none",B.style=""),E(1))};n.onstatechange=I,I(),o=l;let b=window.location.pathname;if(g<=1024&&!d){let e="";for(let t of A(l))e+=String.fromCharCode(t);b+="#"+btoa(e),b!=window.location.pathname+window.location.hash&&history.pushState(null,null,b)}B.width=B.width;try{let t={initial:4};c||(t.maximum=4);let B,r=new WebAssembly.Memory(t),d=A(r.buffer),C={env:{memory:r}},Q=e=>{if(B&&(!c||0!=A(e)[0])){d.set(A(e));let t=B.exports.load_uw8(e.byteLength);e=new ArrayBuffer(t),A(e).set(d.slice(0,t))}return e},I=async e=>(await WebAssembly.instantiate(e,C)).instance,b=async e=>Q(await(await fetch(e)).arrayBuffer());B=await I(await b(e("data:application/wasLine truncated
web/src/microw8.js
+17 -3
View File
@@ -90,6 +90,9 @@ export default function MicroW8(screen, config = {}) {
keyboardElement.onkeydown = keyHandler;
keyboardElement.onkeyup = keyHandler;
}
let audioContext;
let audioNode;
async function runModule(data, keepUrl) {
if (cancelFunction) {
@@ -97,7 +100,7 @@ export default function MicroW8(screen, config = {}) {
cancelFunction = null;
}
let audioContext = new AudioContext({sampleRate: 44100});
audioContext = new AudioContext({sampleRate: 44100});
let keepRunning = true;
let abortController = new AbortController();
cancelFunction = () => {
@@ -114,7 +117,7 @@ export default function MicroW8(screen, config = {}) {
}
await audioContext.audioWorklet.addModule(audioWorkletUrl);
let audioNode = new AudioNode(audioContext);
audioNode = new AudioNode(audioContext);
let audioReadyFlags = 0;
let audioReadyResolve;
@@ -334,14 +337,25 @@ export default function MicroW8(screen, config = {}) {
let videoRecorder;
let videoStartTime;
let videoAudioSourceNode;
let videoAudioStreamNode;
function recordVideo() {
if(videoRecorder) {
videoRecorder.stop();
videoRecorder = null;
videoAudioSourceNode.disconnect(videoAudioStreamNode);
videoAudioSourceNode = null;
videoAudioStreamNode = null;
return;
}
let stream = screen.captureStream();
videoAudioStreamNode = audioContext.createMediaStreamDestination();
videoAudioSourceNode = audioNode;
audioNode.connect(videoAudioStreamNode);
stream.addTrack(videoAudioStreamNode.stream.getAudioTracks()[0]);
videoRecorder = new MediaRecorder(screen.captureStream(), {
videoRecorder = new MediaRecorder(stream, {
mimeType: 'video/webm',
videoBitsPerSecond: 25000000
});