Skip to content

Instantly share code, notes, and snippets.

@CaptainHypertext

CaptainHypertext/recording-demo.html

Last active April 23, 2018 15:50
Download ZIP

Revisions

  1. CaptainHypertext revised this gist Apr 23, 2018. 1 changed file with 16 additions and 8 deletions.
    24 changes: 16 additions & 8 deletions recording-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,10 @@
    <button id="end-recording-btn" type="button" style="display: none;">
    Stop Recording
    </button>

    <br/><button id="release-media-btn" type="button">
    Release User Media
    </button>
    </div>

    <script>
    @@ -51,10 +55,11 @@

    var recordBtn = document.querySelector('#start-recording-btn');
    var stopBtn = document.querySelector('#end-recording-btn');
    var releaseBtn = document.querySelector('#release-media-btn');

    // Event for clicking record button
    recordBtn.addEventListener('click', function(e) {
    console.log('RECORD STARTING');
    console.log('RECORD STARTING');
    recorder.start();

    this.style.display = 'none';
    @@ -65,20 +70,23 @@

    // Event for clicking end record button
    stopBtn.addEventListener('click', function(e) {
    console.log('RECORD STOPPING');
    console.log('RECORD STOPPING');
    recorder.stop();

    this.style.display = 'none';
    recordBtn.style.display = 'block';
    });

    // Example of releasing media access
    // if( typeof stream != 'undefined' && stream != null ) {
    // var tracks = stream.getTracks();
    // tracks.forEach(function(track) {
    // track.stop();
    // });
    // }
    releaseBtn.addEventListener('click', function(e) {
    if( typeof stream != 'undefined' && stream != null ) {
    // Get each track and stop it
    var tracks = stream.getTracks();
    tracks.forEach(function(track) {
    track.stop();
    });
    }
    });

    // Example of passing recording off to a server (uses jQuery)
    // Sends a data url string with recording base64 encoded
  2. CaptainHypertext renamed this gist Apr 23, 2018. 1 changed file with 0 additions and 0 deletions.
    0 record.html → recording-demo.html
    View file
    File renamed without changes.
  3. CaptainHypertext created this gist Apr 23, 2018.
    129 changes: 129 additions & 0 deletions record.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,129 @@
    <html>
    <body>
    <div>
    <audio id="recording-audio" controls style="width: 100%; margin-bottom: 15px;" src="#">
    Your browser does not support the audio element.
    </audio>

    <button id="start-recording-btn" type="button" style="display: none;">
    Start Recording
    </button>

    <button id="end-recording-btn" type="button" style="display: none;">
    Stop Recording
    </button>
    </div>

    <script>

    var recorder = null;
    var dataChunks = [];
    var blob = null;

    // Check the supported format to use
    var format = (MediaRecorder.isTypeSupported('audio/ogg; codecs=opus')) ? 'audio/ogg; codecs=opus' : 'audio/webm; codecs=opus';

    // Check if media access is possible
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

    // Get media access
    navigator.mediaDevices.getUserMedia({ audio: true })

    // Success
    .then(function(stream) {
    var recorder = new MediaRecorder(stream);

    // Save recording data as it becomes available
    recorder.ondataavailable = function(e) {
    dataChunks.push(e.data);
    };

    // When recorder is stopped, let's capture the recording
    recorder.onstop = function(e) {
    var audioBlock = document.querySelector('#recording-audio');

    blob = new Blob(dataChunks, {type: format});
    dataChunks = [];

    var audioURL = window.URL.createObjectURL(blob);
    audioBlock.src = audioURL;
    };

    var recordBtn = document.querySelector('#start-recording-btn');
    var stopBtn = document.querySelector('#end-recording-btn');

    // Event for clicking record button
    recordBtn.addEventListener('click', function(e) {
    console.log('RECORD STARTING');
    recorder.start();

    this.style.display = 'none';
    stopBtn.style.display = 'block';
    });

    recordBtn.style.display = 'block';

    // Event for clicking end record button
    stopBtn.addEventListener('click', function(e) {
    console.log('RECORD STOPPING');
    recorder.stop();

    this.style.display = 'none';
    recordBtn.style.display = 'block';
    });

    // Example of releasing media access
    // if( typeof stream != 'undefined' && stream != null ) {
    // var tracks = stream.getTracks();
    // tracks.forEach(function(track) {
    // track.stop();
    // });
    // }

    // Example of passing recording off to a server (uses jQuery)
    // Sends a data url string with recording base64 encoded
    /*
    $('#recording-form').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var fileReader = new FileReader();
    // Callback for when the blob is loaded into the FileReader
    fileReader.onload = function() {
    formData.append('recording', fileReader.result);
    $.ajax({
    url: 'https://example.com/recording',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function(response) {
    console.log('Recording saved!');
    },
    error: function(response) {
    console.error('Error posting recording');
    }
    });
    }
    // Load audio into FileReader, firing off submission
    fileReader.readAsDataURL(blob);
    })
    */
    })

    // Error callback
    .catch(function(err) {
    // Denied media access
    console.warn('Error occured when getting user media: ' + err);
    });

    } else {
    console.warn('Media usage not supported');
    }

    </script>
    </body>
    </html>