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

 

<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()

Leave a Reply