From: Taran Nathan Date: Mon, 20 Jul 2026 23:53:12 +0000 (-0700) Subject: try #1 X-Git-Url: https://git.taranathan.com/?a=commitdiff_plain;h=33c6f2354f5ecaa1f86010c809bdc32e2452d6ec;p=audio-stream.git try #1 --- diff --git a/index.html b/index.html index eafb03c..e2cad11 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,6 @@

Record and Play Audio in JavaScript

diff --git a/script.js b/script.js index 2a8c914..5534818 100644 --- a/script.js +++ b/script.js @@ -1,10 +1,64 @@ -console.log("wassup") -// Access the permission for use -// the microphone -navigator.mediaDevices.getUserMedia({ audio: true }) - .then(function(audio_stream) { - console.log("hi"); - }) - .catch(function(err) { - console.log(err.name, err.message); - }); +let mediaRecorder; +let audioChunks = []; +let recordedAudioUrl = ""; + +const startButton = document.getElementById("btnStart"); +const stopButton = document.getElementById("btnStop"); +const playButton = document.getElementById("btnPlay"); +const audioElement = document.getElementById("audioPlay"); + +startButton.addEventListener("click", async () => { + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + mediaRecorder = new MediaRecorder(stream); + audioChunks = []; + + mediaRecorder.addEventListener("dataavailable", (event) => { + if (event.data.size > 0) { + audioChunks.push(event.data); + } + }); + + mediaRecorder.addEventListener("stop", async () => { + const audioBlob = new Blob(audioChunks, { type: "audio/ogg" }); + console.log(await audioBlob.text()); + + if (recordedAudioUrl) { + URL.revokeObjectURL(recordedAudioUrl); + } + + recordedAudioUrl = URL.createObjectURL(audioBlob); + console.log(recordedAudioUrl); + audioElement.src = recordedAudioUrl; + playButton.disabled = false; + + stream.getTracks().forEach((track) => track.stop()); + }); + + mediaRecorder.start(); + startButton.disabled = true; + stopButton.disabled = false; + playButton.disabled = true; + } catch (error) { + console.error("Microphone access failed:", error); + } +}); + +stopButton.addEventListener("click", () => { + if (!mediaRecorder || mediaRecorder.state !== "recording") { + return; + } + + mediaRecorder.stop(); + stopButton.disabled = true; + startButton.disabled = false; +}); + +playButton.addEventListener("click", () => { + if (!recordedAudioUrl) { + return; + } + + audioElement.currentTime = 0; + audioElement.play(); +});