record-audio
Version:
Audio recording using RecordRTC. RecordRTC is a client-side audio/video/gif/html recording library.
124 lines (106 loc) • 3.62 kB
HTML
<!--
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Experiments - github.com/muaz-khan/WebRTC-Experiment
-->
<html>
<head>
<meta charset="utf-8" />
<title>RecordRTC audio recording and saving to Node.js</title>
<script>
if(location.href.indexOf('file:') == 0) {
document.write('<h1 style="color:red;">Please load this HTML file on HTTP or HTTPS.</h1>');
}
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<script src="/RecordRTC.js"> </script>
<style>
html { background-color: #f7f7f7; }
body {
background-color: white;
margin: 1% 35%;
border: 1px solid rgb(15, 158, 238);
text-align: center;
}
hr {
border:0;
border-top: 1px solid rgb(15, 158, 238);
}
a {
color: #2844FA;
text-decoration: none;
}
a:hover, a:focus { color: #1B29A4; }
a:active { color: #000; }
</style>
</head>
<body>
<h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">Audio Recording</a> and saving to <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs">Node.js</a></h1>
<p>
<audio id="audio-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;height: 11em;"></audio>
</p><hr />
<div>
<button id="start-recording">Start Recording</button>
<button id="stop-recording" disabled="">Stop Recording</button>
</div>
<script>
var startRecording = document.getElementById('start-recording');
var stopRecording = document.getElementById('stop-recording');
var audioPreview = document.getElementById('audio-preview');
var recordAudio;
startRecording.onclick = function () {
startRecording.disabled = true;
navigator.getUserMedia({
audio: true
}, function (stream) {
audioPreview.src = window.URL.createObjectURL(stream);
audioPreview.play();
recordAudio = RecordRTC(stream, {
bufferSize: 16384
});
recordAudio.startRecording();
stopRecording.disabled = false;
});
};
var fileName;
stopRecording.onclick = function () {
startRecording.disabled = false;
stopRecording.disabled = true;
fileName = Math.round(Math.random() * 99999999) + 99999999;
recordAudio.stopRecording();
recordAudio.getDataURL(function (audioDataURL) {
var files = {
audio: {
name: fileName + '.wav',
type: 'audio/wav',
contents: audioDataURL
}
};
audioPreview.src = '';
audioPreview.poster = '/ajax-loader.gif';
xhr('/upload', JSON.stringify(files), function (fileName) {
var href = location.href.substr(0, location.href.lastIndexOf('/') + 1);
audioPreview.src = href + 'uploads/' + fileName;
audioPreview.play();
});
});
};
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
request.open('POST', url);
request.send(data);
}
</script>
<footer style="position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:2em;">
<a href="https://www.WebRTC-Experiment.com">www.WebRTC-Experiment.com</a>
</footer>
</body>
</html>