ManishLSN · June 28, 2018 13:36
diff --git a/recordmp3orwave.mp3 b/recordmp3orwave.mp3

 <!--
 > Muaz Khan     - www.MuazKhan.com
 > MIT License   - www.WebRTC-Experiment.com/licence
 > Documentation - github.com/muaz-khan/RecordRTC
 > and           - RecordRTC.org
 for converting to base64

 audioElement.src = URL.createObjectURL(encoder.finish());
 let reader = new window.FileReader();
 reader.readAsDataURL(recorder.getBlob()); // <----------------check this line
 reader.onloadend = function() {
    var audioBase64 = reader.result;
    let audioTurned = audioBase64.substr(audioBase64.indexOf(',') + 1);
    $("#audiofile").val(audioTurned);
 };


 -->
 <!DOCTYPE html>
 <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://cdn.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="https://cdn.webrtc-experiment.com/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> &copy; </span>
                <a href="http://www.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">
            <small><a href="http://www.maninblack.org/demos.html" target="_blank" rel="nofollow">You can try demo mp3 files</a></small>
            <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:[email protected]" target="_blank">[email protected]</a>
        </p>
    </footer>

    <!-- commits.js is useless for you! -->
    <script>
        window.useThisGithubPath = 'muaz-khan/RecordRTC';
    </script>
    <script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
 </body>

 </html>

	<!--
	> Muaz Khan - www.MuazKhan.com
	> MIT License - www.WebRTC-Experiment.com/licence
	> Documentation - github.com/muaz-khan/RecordRTC
	> and - RecordRTC.org
	for converting to base64

	audioElement.src = URL.createObjectURL(encoder.finish());
	let reader = new window.FileReader();
	reader.readAsDataURL(recorder.getBlob()); // <----------------check this line
	reader.onloadend = function() {
	var audioBase64 = reader.result;
	let audioTurned = audioBase64.substr(audioBase64.indexOf(',') + 1);
	$("#audiofile").val(audioTurned);
	};


	-->
	<!DOCTYPE html>
	<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://cdn.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="https://cdn.webrtc-experiment.com/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="http://www.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">
	<small><a href="http://www.maninblack.org/demos.html" target="_blank" rel="nofollow">You can try demo mp3 files</a></small>
	<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:[email protected]" target="_blank">[email protected]</a>
	</p>
	</footer>

	<!-- commits.js is useless for you! -->
	<script>
	window.useThisGithubPath = 'muaz-khan/RecordRTC';
	</script>
	<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
	</body>

	</html>