Merge pull request #2 from eliasmeire/feat/pause

feat(pause): Add pause/resume support

examples/basic/index.html

@@ -14,15 +14,15 @@
         <main id="main">
             <h1>
                 MP3 MediaRecorder
-                <div id="indicator" class="indicator"></div>
             </h1>
             <section class="nes-container with-title" id="recordings">
                 <h2 class="title">Recordings</h2>
-                <p id="empty">empty</p>
             </section>
             <div>
-                <button class="nes-btn is-primary" id="record">Record</button>
-                <button class="nes-btn is-error" id="stop">Stop</button>
+                <button class="nes-btn is-primary is-disabled" id="record">Record</button>
+                <button class="nes-btn is-error is-disabled" id="stop">Stop</button>
+                <button class="nes-btn is-disabled" id="pause">Pause</button>
+                <button class="nes-btn is-disabled" id="resume">Resume</button>
             </div>
         </main>
     </body>

examples/basic/index.js

@@ -1,78 +1,90 @@
-const recordButton = document.getElementById('record');
+const startButton = document.getElementById('record');
 const stopButton = document.getElementById('stop');
+const pauseButton = document.getElementById('pause');
+const resumeButton = document.getElementById('resume');
 const recordings = document.getElementById('recordings');
-const indicator = document.getElementById('indicator');
 const main = document.getElementById('main');
-let empty = document.getElementById('empty');
 
 let isRecording = false;
 let recorder = null;
 let blobs = [];
 let mediaStream = null;
+let isPaused = false;
+let Mp3MediaRecorder = null;
 
 window.mp3MediaRecorder
     .getMp3MediaRecorder({ wasmURL: `${window.location.origin}/dist/vmsg.wasm` })
-    .then(Mp3MediaRecorder => {
-        main.classList.add('main--loaded');
+    .then(recorderClass => {
+        Mp3MediaRecorder = recorderClass;
+        startButton.classList.remove('is-disabled');
+    });
 
-        const removeEmpty = () => {
-            if (empty) {
-                recordings.removeChild(empty);
-                empty = null;
-            }
-        };
+startButton.addEventListener('click', () => {
+    navigator.mediaDevices.getUserMedia({ audio: true }).then(
+        stream => {
+            mediaStream = stream;
+            recorder = new Mp3MediaRecorder(stream);
+            recorder.start();
 
-        const addRecording = () => {
-            console.log(blobs);
-            const mp3Blob = new Blob(blobs, { type: 'audio/mpeg' });
-            const mp3BlobUrl = URL.createObjectURL(mp3Blob);
-            const audio = new Audio();
-            audio.controls = true;
-            audio.src = mp3BlobUrl;
-            recordings.appendChild(audio);
-        };
+            recorder.onstart = e => {
+                console.log('onstart', e);
+                blobs = [];
+                startButton.classList.add('is-disabled');
+                stopButton.classList.remove('is-disabled');
+                pauseButton.classList.remove('is-disabled');
+            };
 
-        const toggleButtons = () => {
-            isRecording = !isRecording;
-            stopButton.style.display = isRecording ? 'block' : 'none';
-            recordButton.style.display = isRecording ? 'none' : 'block';
-        };
+            recorder.ondataavailable = e => {
+                console.log('ondataavailable', e);
+                blobs.push(e.data);
+            };
 
-        recordButton.addEventListener('click', () => {
-            navigator.mediaDevices.getUserMedia({ audio: true }).then(
-                stream => {
-                    toggleButtons();
-                    mediaStream = stream;
-                    recorder = new Mp3MediaRecorder(stream);
-                    recorder.start();
+            recorder.onstop = e => {
+                console.log('onstop', e);
+                mediaStream.getTracks().forEach(track => track.stop());
 
-                    recorder.onstart = e => {
-                        console.log('start', e);
-                        blobs = [];
-                        indicator.classList.add('indicator--visible');
-                    };
+                startButton.classList.remove('is-disabled');
+                pauseButton.classList.add('is-disabled');
+                stopButton.classList.add('is-disabled');
 
-                    recorder.ondataavailable = e => {
-                        console.log('data', e);
-                        blobs.push(e.data);
-                    };
+                const mp3Blob = new Blob(blobs, { type: 'audio/mpeg' });
+                const mp3BlobUrl = URL.createObjectURL(mp3Blob);
+                const audio = new Audio();
+                audio.controls = true;
+                audio.src = mp3BlobUrl;
+                recordings.appendChild(audio);
+            };
 
-                    recorder.onstop = e => {
-                        console.log('onstop', e);
-                        indicator.classList.remove('indicator--visible');
-                        removeEmpty();
-                        addRecording();
-                    };
-                },
-                reason => {
-                    console.warn('Could not get microphone access.\nError:', reason.message);
-                }
-            );
-        });
+            recorder.onpause = e => {
+                console.log('onpause', e);
+                resumeButton.classList.remove('is-disabled');
+                pauseButton.classList.add('is-disabled');
+            };
 
-        stopButton.addEventListener('click', () => {
-            toggleButtons();
-            mediaStream.getTracks().forEach(track => track.stop());
-            recorder.stop();
-        });
-    });
+            recorder.onresume = e => {
+                console.log('onresume', e);
+                resumeButton.classList.add('is-disabled');
+                pauseButton.classList.remove('is-disabled');
+            };
+
+            recorder.onerror = e => {
+                console.error('onerror', e);
+            };
+        },
+        reason => {
+            console.warn('Could not get microphone access.\nError:', reason.message);
+        }
+    );
+});
+
+stopButton.addEventListener('click', () => {
+    recorder.stop();
+});
+
+pauseButton.addEventListener('click', () => {
+    recorder.pause();
+});
+
+resumeButton.addEventListener('click', () => {
+    recorder.resume();
+});

examples/basic/style.css

@@ -19,19 +19,10 @@ h1 {
     align-items: center;
 }
 
-#stop {
-    display: none;
-}
-
 main {
-    display: none;
     padding: 0 2rem;
 }
 
-.main--loaded {
-    display: block;
-}
-
 main > * + * {
     margin-top: 2rem;
 }
@@ -48,26 +39,6 @@ main > * + * {
     margin-top: 1rem;
 }
 
-.indicator {
-    opacity: 0;
-    width: 1rem;
-    height: 1rem;
-    margin-left: 0.2rem;
-    background: #ce372b;
-    /* border: 2px solid #8c2022; */
-    border-radius: 1rem;
-}
-
-.indicator--visible {
-    opacity: 1;
-    animation: pulse 1s alternate infinite ease-in-out;
-}
-
-@keyframes pulse {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+.is-disabled {
+    pointer-events: none;
 }

src/recorder.ts

@@ -69,11 +69,15 @@ export const getMp3MediaRecorder = (config: RecorderConfig): Promise<typeof Medi
         }
 
         pause(): void {
+            this.audioContext.suspend();
             this.state = 'paused';
+            this.dispatchEvent(new Event('pause'));
         }
 
         resume(): void {
+            this.audioContext.resume();
             this.state = 'recording';
+            this.dispatchEvent(new Event('resume'));
         }
 
         requestData(): void {
@@ -107,6 +111,7 @@ export const getMp3MediaRecorder = (config: RecorderConfig): Promise<typeof Medi
             }
         };
     }
+
     defineEventAttribute(Mp3MediaRecorder.prototype, 'start');
     defineEventAttribute(Mp3MediaRecorder.prototype, 'stop');
     defineEventAttribute(Mp3MediaRecorder.prototype, 'pause');