@vikasietum_tecknology/record-rtc
Version:
record-rtc is a library based on recordrtc library. In this forked version of the original library we have optimized the memory management. The video recording is stored in IndexDB in chunks.
297 lines (252 loc) • 11.8 kB
HTML
<!--
> Muaz Khan - www.MuazKhan.com
> MIT License - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/RecordRTC
> and - RecordRTC.org
-->
<html lang="en">
<head>
<title>Mp3 Audio Recording using RecordRTC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css">
<style>
audio {
vertical-align: bottom;
width: 10em;
}
video {
max-width: 100%;
vertical-align: top;
}
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 30%;
}
p,
.inner {
padding: 1em;
}
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
label {
display: inline-block;
width: 8em;
}
</style>
<style>
#recordmp3-container label {
font-size: inherit;
width: auto;
}
#recordmp3-container input {
font-family: Myriad, Arial, Verdana;
font-weight: normal;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 4px 12px;
text-decoration: none;
color: rgb(27, 26, 26);
display: inline-block;
box-shadow: rgb(255, 255, 255) 1px 1px 0px 0px inset;
text-shadow: none;
background: white;
border: 1px solid red;
outline:none;
width: auto;
font-size: inherit;
}
#recordmp3-container input:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(5%, rgb(221, 221, 221)), to(rgb(250, 250, 250)));
border: 1px solid rgb(142, 142, 142);
}
#recordmp3-container input[disabled] {
background: rgb(249, 249, 249);
border: 1px solid rgb(218, 207, 207);
color: rgb(197, 189, 189);
}
</style>
<script src="/RecordRTC.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
Mp3 Audio Recording using RecordRTC
</h1>
<p>
<a href="https://www.webrtc-experiment.com/RecordRTC/">HOME</a>
<span> © </span>
<a href="https://MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/RecordRTC/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/RecordRTC/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<section id="recordmp3-container" class="experiment recordrtc">
<h2 class="header">Select Mp3/Wav from your disk:</h2><input id="local-file" type="file">
<br>
<label for="load-mp3-url">Load Mp3 from URL:</label><input type="url" id="load-mp3-url" placeholder="cors mp3 returns zero-data">
<hr>
</section>
<script>
var recordMp3Container = document.getElementById('recordmp3-container');
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var gainNode = context.createGain();
gainNode.connect(context.destination);
gainNode.gain.value = 0; // don't play for self
// read & record mp3 file from local system
document.getElementById('local-file').onchange = function() {
this.disabled = true;
var reader = new FileReader();
reader.file = this.files[0];
reader.onload = (function(e) {
// Import callback function
// provides PCM audio data decoded as an audio buffer
context.decodeAudioData(e.target.result, createSoundSource);
});
reader.readAsArrayBuffer(reader.file);
};
function createSoundSource(buffer) {
var soundSource = context.createBufferSource();
soundSource.buffer = buffer;
soundSource.start(0, 0 / 1000);
soundSource.connect(gainNode);
var destination = context.createMediaStreamDestination();
soundSource.connect(destination);
// durtion=second*1000 (milliseconds)
recordMp3Stream(destination.stream, buffer.duration * 1000);
}
var recordAudio;
// using RecordRTC.js to record mp3 stream
function recordMp3Stream(stream, duration) {
if (!duration) duration = 3 * 1000;
duration = parseInt(duration);
var p = document.createElement('p');
recordMp3Container.appendChild(p);
recordMp3Container.appendChild(document.createElement('hr'));
var remaining = duration;
(function recordingInProgress() {
p.innerHTML = 'Please wait <b>' + (remaining / 1000) + '</b> seconds.';
p.innerHTML += '<br> Recording Duration: <b>' + duration + '</b>'
+ ' milliseconds (i.e. <b>' + (duration / 1000) + '</b> seconds)';
remaining -= 1000;
if(remaining > 0) {
setTimeout(recordingInProgress, 1000);
}
})();
recordAudio = RecordRTC(stream, {
type: 'audio',
recorderType: StereoAudioRecorder
});
// duration should be in milliseconds
// RecordRTC will auto stop recording after provided duration
recordAudio.setRecordingDuration(duration)
.onRecordingStopped(stoppedCallback);
recordAudio.startRecording();
}
// RecordRTC auto stopped recording after provided duration
function stoppedCallback(url) {
var audio = new Audio();
audio.controls = true;
audio.src = URL.createObjectURL(recordAudio.blob);
recordMp3Container.appendChild(audio);
audio.play();
recordMp3Container.appendChild(document.createElement('hr'));
}
// You can get mp3 from any URL but don't forget that
// Chrome (even Firefox) returns zero-data if you tried to
// use cross-origin mp3 file
// so, use mp3 from same-origin
// you can even use XMLHttpReqhest in that case.
// XMLHttpReqeust returns buffers
// which means that you can call this method:
// createSoundSource( xhmlHttpRequest.response );
function getMp3FromUrl(mp3URL) {
var audio = new Audio();
audio.volume = 0;
audio.addEventListener("canplay", function() {
var context2 = new AudioContext();
var source = context2.createMediaElementSource(audio);
source.connect(context2.destination);
var destination = context2.createMediaStreamDestination();
source.connect(destination);
recordMp3Stream(destination.stream, audio.duration * 1000);
});
audio.onerror = function() {
alert('Failed to load: ' + mp3URL);
document.getElementById('load-mp3-url').value = '';
};
// this demo is using <audio> instead of XMLHttpRequest
// to fix cross-origin erros
// however we are still unable to read cross-origin mp3 files
// Chrome returns zeros-data for CORS-mp3 file.
audio.src = mp3URL;
}
document.getElementById('load-mp3-url').onblur = function() {
if (!this.value) return;
this.disabled = true;
getMp3FromUrl(this.value);
}
</script>
<section class="experiment" style="padding: 5px;">
<a href="https://github.com/muaz-khan/RecordRTC">RecordRTC</a> can record both LIVE-microphone as well as pre-recorded (AOD) Mp3/WAV files.
<br><br>
You can download Mp3 files from this URL: <a href="http://www.dr-lex.be/software/testsounds.html" target="_blank" rel="nofollow">http://www.dr-lex.be/software/testsounds.html</a>
<br><br>
Source code of this demo is <a href="https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/Record-Mp3-or-Wav.html">available here</a>.
</section>
<section class="experiment own-widgets">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/issues" target="_blank">RecordRTC Issues</a>
</h2>
<div id="github-issues"></div>
</section>
<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button>
<small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
</section>
<section class="experiment">
<p style="margin-top: 0;">
RecordRTC is MIT licensed on Github! <a href="https://github.com/muaz-khan/RecordRTC" target="_blank">Documentation</a>
</p>
</section>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/commits/master" target="_blank">Latest Updates</a>
</h2>
<div id="github-commits"></div>
</section>
</article>
<a href="https://github.com/muaz-khan/RecordRTC" class="fork-left"></a>
<footer>
<p>
<a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
</p>
</footer>
<!-- commits.js is useless for you! -->
<script>
window.useThisGithubPath = 'muaz-khan/RecordRTC';
</script>
<script src="https://www.webrtc-experiment.com/commits.js" async></script>
</body>
</html>