Build a Voice or Sound Recorder Which Downloads Recording as OGA File in Browser Using Javascript

Everyone has every option I have to Build a Voice or Sound Recorder Which Downloads Recording as OGA File in Browser Using Javascript I have the option to write this article. I am writing this article to resolve your doubts. We ask that you understand this article well.

Build a Voice or Sound Recorder Which Downloads Recording as OGA File in Browser Using Javascript

Build a Voice or Sound Recorder Which Downloads Recording as OGA File in Browser Using Javascript

<div class="container">
    <h1>VOICE RECORDING DEMO FTW, BRO</h1>
    <span>Recorder</span>
    <audio id="recorder" muted hidden></audio>
    <div>
        <button id="start">Record</button>
        <button id="stop">Stop Recording</button>
    </div>
    <span>Saved Recording</span>
    <audio id="player" controls></audio>
</div>
.container {
     display: flex;
     flex-direction: column;
}
 .container > * {
     margin: 8px;
}
 button {
     max-width: 300px;
}
class VoiceRecorder {
    constructor() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            console.log("getUserMedia supported")
        } else {
            console.log("getUserMedia is not supported on your browser!")
        }

        this.mediaRecorder
        this.stream
        this.chunks = []
        this.isRecording = false

        this.recorderRef = document.querySelector("#recorder")
        this.playerRef = document.querySelector("#player")
        this.startRef = document.querySelector("#start")
        this.stopRef = document.querySelector("#stop")
        
        this.startRef.onclick = this.startRecording.bind(this)
        this.stopRef.onclick = this.stopRecording.bind(this)

        this.constraints = {
            audio: true,
            video: false
        }
        
    }

    handleSuccess(stream) {
        this.stream = stream
        this.stream.oninactive = () => {
            console.log("Stream ended!")
        };
        this.recorderRef.srcObject = this.stream
        this.mediaRecorder = new MediaRecorder(this.stream)
        console.log(this.mediaRecorder)
        this.mediaRecorder.ondataavailable = this.onMediaRecorderDataAvailable.bind(this)
        this.mediaRecorder.onstop = this.onMediaRecorderStop.bind(this)
        this.recorderRef.play()
        this.mediaRecorder.start()
    }

    handleError(error) {
        console.log("navigator.getUserMedia error: ", error)
    }
    
    onMediaRecorderDataAvailable(e) { this.chunks.push(e.data) }
    
    onMediaRecorderStop(e) { 
            const blob = new Blob(this.chunks, { 'type': 'audio/ogg; codecs=opus' })
            const audioURL = window.URL.createObjectURL(blob)
            this.playerRef.src = audioURL
            this.chunks = []
            this.stream.getAudioTracks().forEach(track => track.stop())
            this.stream = null
    }

    startRecording() {
        if (this.isRecording) return
        this.isRecording = true
        this.startRef.innerHTML = 'Recording...'
        this.playerRef.src=""
        navigator.mediaDevices
            .getUserMedia(this.constraints)
            .then(this.handleSuccess.bind(this))
            .catch(this.handleError.bind(this))
    }
    
    stopRecording() {
        if (!this.isRecording) return
        this.isRecording = false
        this.startRef.innerHTML = 'Record'
        this.recorderRef.pause()
        this.mediaRecorder.stop()
    }
    
}

window.voiceRecorder = new VoiceRecorder()

Read Also: Build a CloudPDF PDF Viewer or Reader in React.js, Angular, Vue.js and Vanilla Javascript

Final Words

We hope the Build a Voice or Sound Recorder Which Downloads Recording as OGA File in Browser Using Javascript article fills your doubts. And let us know if you have any doubts. We resolve your doubts Thank you.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment