Create plugins using HTML,JS and CSS to Record, Play, Download With HTML5

 In this tutorial learn to Create plugins using HTML,JS and CSS to Record, Play, Download With HTML5. Step wise procedure is mentioned here

In this tutorial, I will introduce you to a small plugin I created to record, play & download the microphone input voice of the user. This is made possible by the Web Audio APIvoice

Introduction

We will only use HTMLJSCSS. There aren’t any server side stuff in this one. We only have one sub folder for the JS files called “cdn”.

As I said before, I have created a jQuery plugin for recording the voice and managing it. It needs RecorderJS for working.

You can get it from “https://github.com/mattdiamond/Recorderjs”. Note that the plugin also needs “recorderWorker.js” which is in the same GitHub repository.

You can get my Voice plugin as “jquery.voice.js” in the “cdn” directory.

Main Page

We have only one page to display to the user :

<!DOCTYPE html>
<html>
 	<head>
		<script src="http://lab.subinsb.com/projects/jquery/core/jquery-2.1.1.js"></script>
		<script src="cdn/recorder.js"></script>
		<script src="cdn/jquery.voice.js"></script>
		<script src="cdn/record.js"></script>
 	</head>
 	<body>
		<audio controls src="" id="audio"></audio>
		<div style="margin:10px;">
			<a class="button" id="record">Record</a>
			<a class="button disabled one" id="stop">Reset</a>
			<a class="button disabled one" id="play">Play</a>
			<a class="button disabled one" id="download">Download</a>
		</div>
		<input class="button" type="checkbox" id="live"/>
		<label for="live">Live Output</label>
		<style>
		.button{
			display: inline-block;
			vertical-align: middle;
			margin: 0px 5px;
			padding: 5px 12px;
			cursor: pointer;
			outline: none;
			font-size: 13px;
			text-decoration: none !important;
			text-align: center;
			color:#fff;
			background-color: #4D90FE;
			background-image: linear-gradient(top,#4D90FE, #4787ED);
			background-image: -ms-linear-gradient(top,#4D90FE, #4787ED);
			background-image: -o-linear-gradient(top,#4D90FE, #4787ED);
			background-image: linear-gradient(top,#4D90FE, #4787ED);
			border: 1px solid #4787ED;
			box-shadow: 0 1px 3px #BFBFBF;
		}
		a.button{
			color: #fff;
		}
		.button:hover{
			box-shadow: inset 0px 1px 1px #8C8C8C;
		}
		.button.disabled{
			box-shadow:none;
			opacity:0.7;
		}
		</style>
 	</body>
</html>



As you can see, we only use CSS for styling the button and nothing else. We 
also don't include the "recorderWorker.js", because it's loaded by the 
"recorder.js" which we have included in the page.

record.js

This file adds event listeners to the buttons to control recording and initiates the functions :

function restore(){$("#record,#live").removeClass("disabled");$(".one").addClass("disabled");$.voice.stop();}
$(document).ready(function(){
	$(document).on("click", "#record:not(.disabled)", function(){
		elem = $(this);
		$.voice.record($("#live").is(":checked"), function(){
			elem.addClass("disabled");
			$("#live").addClass("disabled");
			$("#stop,#play,#download").removeClass("disabled");
		});
	});
	$(document).on("click", "#stop:not(.disabled)", function(){
		restore();
	});
	$(document).on("click", "#play:not(.disabled)", function(){
		$.voice.export(function(url){
			$("#audio").attr("src", url);
			$("#audio")[0].play();
		}, "URL");
		restore();
	});
	$(document).on("click", "#download:not(.disabled)", function(){
		$.voice.export(function(url){
			$("<a href='"+url+"' download='MyRecording.wav'></a>")[0].click();
		}, "URL");
		restore();
	});
});

The restore() function reverts the action buttons to it's 
original state( Record - enabled, other buttons - disabled).

Configure

The location of the “recorderWorker.js” should be mentioned in the workerPath item of “jquery.voice.js” file. This is really necessary for the working. By default, it’s value is :

cdn/recorderWorker.js

It’s a relative path from the file it’s ran. If the file location is http://mySite.com/project/index.html and “recorderWorker.js” is in http://mySite.com/project/cdn/recorderWorker.js , then the value should be the above “cdn/recorderWorker.js”.

Recording

We start recording by calling the function $.voice.record(); and the user will be asked for authorizing the use of microphone. if the user accepts it, recording will start and if user declined, an alert box will be opened.

$.voice.record(false, callback());


There is also a feature to live output the recording voice to the speaker. You can do this by making the first parameter of $.voice.record() to boolean true.

The recording is stopped using :


$.voice.stop();


It doesn't accept any parameters and the return value will be $.voice object 
itself.

Export

$.voice.export can be used for obtaining the recorded audio URL and the blob data of the recorder audio. Example of obtaining blob data :

 

$.voice.export(function(blob){
	console.log(blob); // The blob data
}, "blob");

It is not necessarily required to make the 2nd parameter value to “blob”, because by default it’s set as “blob”.

You can also get the blob URL of the recorded audio :

 

$.voice.export(function(url){
	console.log(url); // The blob URL
}, "URL");

 

An example of making an audio element to play the audio file :

 

$.voice.export(function(url){
    $("<audio src='"+ url +"'></audio>").appendTo("body");
    $("body audio:last")[0].play();
}, "URL");



That's it. The Voice plugin contains only 60 lines of code, because most of 
the work is done by "recorder.js".

The Voice plugin is just for making the complicated "recorder.js" file to a 
simple one.