arrow_back
View code

<div class="container cdt-margin-top-xxlg">
    <div class="controls">
        <div class="cdt-btn cdt-btn-large cdt-btn-primary start">Start recording</div>
        <div class="cdt-btn cdt-btn-large stop">Stop recording</div>
    </div>
    <div class="output cdt-margin-top-xlg"></div>
</div>
                        
Copy HTML

/*
 * File: _audio-recorder.scss
 * Location /src/scss/components
 * Audio recorder component
 */

.container {
    margin: 0 auto;
    display: flex;
    width: 500px;
    justify-content: center;
    flex-wrap: wrap;
    @media screen and (max-width: 768px) {
        width: 100%;
    }
    .controls {
        display: inline-flex;
        justify-content: space-around;
    }
}
                        
Copy SCSS

/*
 * File: audio-recorder.js
 * Location /src/js/components
 * Audio recorder component
*/

class Recorder {
    constructor(start = '.start', stop = '.stop', output='.output') {
      console.log('coming here')
        this.recorderStartTrigger = document.querySelector(start);
        this.recorderStopTrigger = document.querySelector(stop);
        this.outputPlayer = document.querySelector(output);
        this.mediaRecorder = null;
        this.recording = false;
        this.chunks = [];
        this.initializeListeners();
    }
    initializeListeners() {
      console.log('initializing listeners')
        this.recorderStartTrigger.addEventListener('click', () => {
            if (!this.recording) {
                this.record();
            }
            
        });
        this.recorderStopTrigger.addEventListener('click', () => {
            if (this.recording) {
                this.stop();
            }
        });
    }
    record() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({
                    audio: true
                })
                .then((stream) => {
                    this.mediaRecorder = new MediaRecorder(stream);
                    this.mediaRecorder.ondataavailable = (e) => {
                        this.chunks.push(e.data);
                    }
                    this.mediaRecorder.onstop = (e) => {
                        
                        const audio = document.createElement('audio');
                        audio.setAttribute('controls', '');
                        const audioContainer = document.createElement('div');
                        this.outputPlayer.appendChild(audioContainer);
                        audioContainer.appendChild(audio);

                        const blob = new Blob(this.chunks, {
                            'type': 'audio/ogg; codecs=opus'
                        });
                        this.chunks = [];
                        const audioURL = window.URL.createObjectURL(blob);
                        audio.src = audioURL;
                    }
                    this.mediaRecorder.start();
                    this.recording = true;
                    this.toggleStartRecording('Recording');
                    
                })
                .catch(function(err) {
                });
        } else {
            console.log('getUserMedia not supported on your browser!');
        }
    }
    toggleStartRecording(label) {
        this.recorderStartTrigger.classList.toggle('cdt-btn-primary');
        this.recorderStartTrigger.innerHTML = label;
        this.recorderStartTrigger.classList.toggle('cdt-btn-error');
    }
    stop() {
        this.mediaRecorder.stop();
        this.recording = false;
        this.toggleStartRecording('Start recording');
    };
    play() {}
}

const recorder = new Recorder('.start', '.stop');
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.