Audio Recording with Custom Audio Player using Jquery and HTML5

By | September 9, 2015

728x90-popads_1

Today I want to discuss how to Audio Recording with Custom Audio Player using Jquery and HTML5 on newsfeed using Jquery and HTML5 with custom HTML5 audio player. Take a quick look at the live demo, make sure use the microphone for better result. This post on how to Audio Recording with Custom Audio Player using Jquery and HTML5 will let you know about the simple and effective use of html5 and jquery. html5 and jquery are powerful languages to use in web development.

 Follow Me: WEDNESDAY, MARCH 18, 2015 Audio Recording with Custom Audio Player using Jquery and HTML5

 

 

live_demo_button.fw_b-download

 

Database
Newsfeed table contains all the user update details.

JavaScript
You have to include all these JavaScript library files.

Custom Audio Player HTML Code
HTML code for custom designed audio player, here the actual HTML5 player is in hidden mode. Number 10 refers to user’s session id.

Audio Player CSS
Focus on colored CSS properties.

Audio JavaScript
Contains JavaScript code $(‘body’).on(‘click’,’.audioControl’, function()audioControlis the CLASS name of the DIV tag. Using $(this).attr(“id”) calling the player ID.

Controlling audio controls with Jquery trigger()

Record Button HTML Code
Contains simple HTML code.

CSS

Record Button JavaScript
This script calls record.js for recording the audio.

record.js
Modified and included following code in record.js for storing the audio data in Base64 format.

updateAudio.php
Inserting the audio Base64 data into newsfeed along with user session id.

This way data will store audio data into newsfeed table.

database (1)

db.php
Database connection you have to modify username, password and database values.

 

 

728x90-popads_1