Post
Ask Question
Vishnu Gh

Vishnu Gh

  • 1.2k
  • 498
  • 1.8k

Audio Record and saving to database

Mar 21 2019 2:57 AM
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://cdn.webrtc-experiment.com/commits.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/MediaStreamRecorder.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/gumadapter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
var mediaConstraints = {
audio: true
};
document.querySelector('#save-recording').onclick = function () {
this.disabled = true;
mediaRecorder.save();
// alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
};
function startRecording(idx) {
$('#start-recording').disabled = true;
audiosContainer = document.getElementById('audios-container');
document.getElementById("clicks").innerHTML = "Recording Started";
var f = document.getElementById('clicks');
setInterval(function () {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
};
function stopRecording() {
$('#stop-recording').disabled = true;
document.getElementById("clicks").innerHTML = "Recording Stopped";
var f = document.getElementById('clicks');
setInterval(function () {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
mediaRecorder.stop();
mediaRecorder.stream.stop();
$('.start-recording').disabled = false;
};
function saveRecording() {
mediaRecorder.save();
};
var mediaRecorder;
function onMediaSuccess(stream) {
mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.stream = stream;
mediaRecorder.mimeType = 'audio/wav';
mediaRecorder.audioChannels = 1;
mediaRecorder.ondataavailable = function (blob) {
$('#record-audio').html("<audio controls=''><source src=" + URL.createObjectURL(blob) + "></source></audio>");
};
var timeInterval = 360 * 1000;
mediaRecorder.start(timeInterval);
$('#stop-recording').disabled = false;
}
function onMediaError(e) {
console.error('media error', e);
}
function bytesToSize(bytes) {
var k = 1000;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
function getTimeLength(milliseconds) {
var data = new Date(milliseconds);
return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
}
window.onbeforeunload = function () {
$('#start-recording').disabled = false;
};
</script>
</head>
<body>
<button class="btn btn-primary" id="start-recording" onclick="startRecording()">Recording Start</button>
<button class="btn btn-default" id="stop-recording" onclick="stopRecording()">Stop</button>
<button class="btn btn-default" id="save-recording" onclick="saveRecording()">Save</button>
<div id="record-audio"></div>
<span id="clicks">0</span>
</body>
</html>

Answers (2)