heat/record.html

## record.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AUDIO</title>
</head>
<style>
    .btn {
        display: inline;
        padding: 8px;
        background-color: blue;
        margin: 0 12px;
    }
</style>

<body>

    <audio id="crock" autoplay controls></audio>

    <script>
        var errorCallback = function (e) {
            console.log('Reeeejected!', e);
        };

        // Not showing vendor prefixes.
        navigator.getUserMedia({ audio: true }, function (localMediaStream) {
            var video = document.querySelector('crock');
            video.src = window.URL.createObjectURL(localMediaStream);

            // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
            // See crbug.com/110938.
            video.onloadedmetadata = function (e) {
                // Ready to go. Do some stuff.
            };
        }, errorCallback);
    </script>
    <input type="file" accept="audio/*" capture="microphone">
    <audio id="player" controls></audio>

    <div id="record" class="btn">RECORD</div>
    <div id="stop" class="btn">STOP</div>
    <div id="soundClips">

    </div>
    <script>
        /* var player = document.getElementById('player');

        var handleSuccess = function (stream) {
            if (window.URL) {
              player.src = window.URL.createObjectURL(stream);
            } else {
              player.src = stream;
            }
            var context = new AudioContext();
            var input = context.createMediaStreamSource(stream)
            var processor = context.createScriptProcessor(1024, 1, 1);

            //source.connect(processor);
            processor.connect(context.destination);

            processor.onaudioprocess = function (e) {
                // Do something with the data, i.e Convert this to WAV
                console.log(e.inputBuffer);
            };
        };

        navigator.mediaDevices.getUserMedia({ audio: true, video: false })
            .then(handleSuccess) */
    </script>

    <script>
        var record = document.getElementById('record');
        var stop = document.getElementById('stop');
        var visualize = console.log
        if (navigator.mediaDevices) {
            console.log('getUserMedia supported.');

            var constraints = { audio: true };
            var chunks = [];

            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (stream) {

                    var mediaRecorder = new MediaRecorder(stream);

                    visualize(stream);

                    record.onclick = function () {
                        mediaRecorder.start();
                        console.log(mediaRecorder.state);
                        console.log("recorder started");
                        record.style.background = "red";
                        record.style.color = "black";
                    }

                    stop.onclick = function () {
                        mediaRecorder.stop();
                        console.log(mediaRecorder.state);
                        console.log("recorder stopped");
                        record.style.background = "";
                        record.style.color = "";
                    }

                    mediaRecorder.onstop = function (e) {
                        console.log("data available after MediaRecorder.stop() called.");

                        var clipName = prompt('Enter a name for your sound clip');

                        var clipContainer = document.createElement('article');
                        var clipLabel = document.createElement('p');
                        var audio = document.createElement('audio');
                        var deleteButton = document.createElement('button');

                        clipContainer.classList.add('clip');
                        audio.setAttribute('controls', '');
                        deleteButton.innerHTML = "Delete";
                        clipLabel.innerHTML = clipName;

                        clipContainer.appendChild(audio);
                        clipContainer.appendChild(clipLabel);
                        clipContainer.appendChild(deleteButton);
                        soundClips.appendChild(clipContainer);

                        audio.controls = true;
                        var blob = new Blob(chunks, { 'type': 'audio/ogg; codecs=opus' });
                        chunks = [];
                        var audioURL = URL.createObjectURL(blob);

                        audio.src = audioURL;
                        console.log("recorder stopped");

                        deleteButton.onclick = function (e) {
                            evtTgt = e.target;
                            evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
                        }
                    }

                    mediaRecorder.ondataavailable = function (e) {
                        chunks.push(e.data);
                    }
                })
                .catch(function (err) {
                    console.log('The following error occurred: ' + err);
                })
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>AUDIO</title>
	</head>
	<style>
	.btn {
	display: inline;
	padding: 8px;
	background-color: blue;
	margin: 0 12px;
	}
	</style>

	<body>

	<audio id="crock" autoplay controls></audio>

	<script>
	var errorCallback = function (e) {
	console.log('Reeeejected!', e);
	};

	// Not showing vendor prefixes.
	navigator.getUserMedia({ audio: true }, function (localMediaStream) {
	var video = document.querySelector('crock');
	video.src = window.URL.createObjectURL(localMediaStream);

	// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
	// See crbug.com/110938.
	video.onloadedmetadata = function (e) {
	// Ready to go. Do some stuff.
	};
	}, errorCallback);
	</script>
	<input type="file" accept="audio/*" capture="microphone">
	<audio id="player" controls></audio>

	<div id="record" class="btn">RECORD</div>
	<div id="stop" class="btn">STOP</div>
	<div id="soundClips">

	</div>
	<script>
	/* var player = document.getElementById('player');

	var handleSuccess = function (stream) {
	if (window.URL) {
	player.src = window.URL.createObjectURL(stream);
	} else {
	player.src = stream;
	}
	var context = new AudioContext();
	var input = context.createMediaStreamSource(stream)
	var processor = context.createScriptProcessor(1024, 1, 1);

	//source.connect(processor);
	processor.connect(context.destination);

	processor.onaudioprocess = function (e) {
	// Do something with the data, i.e Convert this to WAV
	console.log(e.inputBuffer);
	};
	};

	navigator.mediaDevices.getUserMedia({ audio: true, video: false })
	.then(handleSuccess) */
	</script>

	<script>
	var record = document.getElementById('record');
	var stop = document.getElementById('stop');
	var visualize = console.log
	if (navigator.mediaDevices) {
	console.log('getUserMedia supported.');

	var constraints = { audio: true };
	var chunks = [];

	navigator.mediaDevices.getUserMedia(constraints)
	.then(function (stream) {

	var mediaRecorder = new MediaRecorder(stream);

	visualize(stream);

	record.onclick = function () {
	mediaRecorder.start();
	console.log(mediaRecorder.state);
	console.log("recorder started");
	record.style.background = "red";
	record.style.color = "black";
	}

	stop.onclick = function () {
	mediaRecorder.stop();
	console.log(mediaRecorder.state);
	console.log("recorder stopped");
	record.style.background = "";
	record.style.color = "";
	}

	mediaRecorder.onstop = function (e) {
	console.log("data available after MediaRecorder.stop() called.");

	var clipName = prompt('Enter a name for your sound clip');

	var clipContainer = document.createElement('article');
	var clipLabel = document.createElement('p');
	var audio = document.createElement('audio');
	var deleteButton = document.createElement('button');

	clipContainer.classList.add('clip');
	audio.setAttribute('controls', '');
	deleteButton.innerHTML = "Delete";
	clipLabel.innerHTML = clipName;

	clipContainer.appendChild(audio);
	clipContainer.appendChild(clipLabel);
	clipContainer.appendChild(deleteButton);
	soundClips.appendChild(clipContainer);

	audio.controls = true;
	var blob = new Blob(chunks, { 'type': 'audio/ogg; codecs=opus' });
	chunks = [];
	var audioURL = URL.createObjectURL(blob);

	audio.src = audioURL;
	console.log("recorder stopped");

	deleteButton.onclick = function (e) {
	evtTgt = e.target;
	evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
	}
	}

	mediaRecorder.ondataavailable = function (e) {
	chunks.push(e.data);
	}
	})
	.catch(function (err) {
	console.log('The following error occurred: ' + err);
	})
	}
	</script>
	</body>

	</html>