CaptainHypertext/recording-demo.html

## recording-demo.html
<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>

          <br/><button id="release-media-btn" type="button">
              Release User Media
          </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');
                        var releaseBtn = document.querySelector('#release-media-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
                        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
                        /*
                        $('#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>
	<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>

	<br/><button id="release-media-btn" type="button">
	Release User Media
	</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');
	var releaseBtn = document.querySelector('#release-media-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
	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
	/*
	$('#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>