Created
March 23, 2024 10:58
-
-
Save lilrooness/bec19d5bac940a1a3404b51fcd1569f7 to your computer and use it in GitHub Desktop.
Simple auidio recording based on MDN Media Stream Article
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <button id="record">Record</button> | |
| <button id="stop">Stop</button> | |
| <div id="soundclips"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| this code is based on the example listed here | |
| https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API | |
| */ | |
| (function () { | |
| const record = document.querySelector("#record"); | |
| const stop = document.querySelector("#stop"); | |
| const soundClips = document.querySelector("#soundclips"); | |
| function setup(stream) { | |
| const mediaRecorder = new MediaRecorder(stream); | |
| record.onclick = () => { | |
| mediaRecorder.start(); | |
| console.log(mediaRecorder.state); | |
| console.log("recorder started"); | |
| record.style.background = "red"; | |
| record.style.color = "black"; | |
| } | |
| stop.onclick = () => { | |
| mediaRecorder.stop(); | |
| console.log(mediaRecorder.state); | |
| console.log("recorder stopped"); | |
| record.style.background = ""; | |
| record.style.color = ""; | |
| } | |
| let chunks = []; | |
| mediaRecorder.ondataavailable = (event) => { | |
| chunks.push(event.data); | |
| } | |
| mediaRecorder.onstop = (event) => { | |
| console.log("recorder stopped"); | |
| const clipName = prompt("Enter a name for your sound clip"); | |
| // create some HTML bullshit ############## | |
| const clipContainer = document.createElement("article"); | |
| const clipLabel = document.createElement("p"); | |
| const audio = document.createElement("audio"); | |
| const deleteButton = document.createElement("button"); | |
| clipContainer.classList.add("clip"); | |
| audio.setAttribute("controls", ""); | |
| deleteButton.innerHTML = "Delete"; | |
| clipLabel.innerHTML = clipName; | |
| clipContainer.appendChild(audio); | |
| clipContainer.appendChild(clipLabel); | |
| clipContainer.appendChild(deleteButton); | |
| soundClips.appendChild(clipContainer); | |
| // finish creating HTML bullshit ######### | |
| const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" }); | |
| chunks = []; | |
| const audioURL = window.URL.createObjectURL(blob); | |
| console.log(audioURL); | |
| audio.src = audioURL; | |
| deleteButton.onclick = (e) => { | |
| let evtTgt = e.target; | |
| evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode); | |
| }; | |
| } | |
| } | |
| console.log("we've loaded the js file"); | |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
| console.log("getUserMedia supported"); | |
| navigator.mediaDevices.getUserMedia({audio: true}) | |
| .then((stream) => { | |
| console.log("executing the setup function"); | |
| setup(stream); | |
| }) | |
| .catch((err) => { | |
| console.error(`The following getUserMedia error occurred: ${err}`) | |
| }); | |
| } else { | |
| console.log("Media not supported on your browser!") | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment