Audio clip recorder for website - javascript

On the client side of my website i want to be able to allow the user to record a short audio clip, around 20 seconds duration and store this recorded audio on the server.
Is there any way to do this using any client side technologies like javascript or flash ?
Thank You.

I'm sure there is a small flash application that enables users to record audio from their computer, but you will need some kind of server script that takes the recorded audio, and saves it on the server.

Related

How to cache audio file delivered from CloudFront using JavaScript / jQuery?

We are developing an online course website.
Courses have audio and text (no video).
Audio files are stored on Amazon S3 and delivered via AWS CloudFront.
Every time a user wants to play a course audio file,
website (server-side) sends a request to CloudFront to get the audio file.
CloudFront will deliver the audio file to the end-user (HTTTP response).
We use JPlayer to play the audio files.
Audio file format is MP3
We are facing the following issue:
Every time a user clicks on play/pause, forward, rewind buttons OR
jumps to a specific position on the audio player,
a new request (for the same audio file) is being sent to CloudFront,
so audio player position is reset to 00:00
Since CloudFront already delivered the audio file to end-user,
there is no need to generate a new request to CloudFront
every time user clicks on audio player buttons (play/pause, forward, rewind) etc.
So once user gets the audio file from CloudFront,
we want to cache the audio file.
How can we store an audio file in local browser cache using JavaScript or jQuery?
Caching audio files should be done using browser caching.
There are several ways to implement "browser caching".
Huge thanks for "stdunbar" for sharing the following link.
This link points to a great article that provides
an overview of the different browser caching solutions.
https://web.dev/storage-for-the-web/
For my use-case, the optimal solution for audio file caching is IndexedDB.
Here are some great articles on how to get-started with IndexedDB (IDB):
Basic concepts
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
Path locations in different browsers
IndexedDB location in Windows 8 Application
Tutorial 1
https://www.tutorialspoint.com/html5/html5_indexeddb.htm
Tutorial 2
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
Tutorial 3
http://www.onlywebpro.com/2012/12/23/html5-storage-indexeddb/

WebRTC remote audio recording solution

I am working on video-conferencing with WebRTC (javascript/php). I want to record whole screen i.e. all videos in single video and store it on server. I am able to record single video at a time but not all videos at a time(whole screen). Can I achieve it?
And one big issue is Remote Audio recording! Is there any solution to record remote audio??
I have taken the code from here.
I do not think php is going to make a difference here, I can see only two ways.
The Easy Way:
Use an MCU for recording( even as an alternative for mesh network for conferences). You can try Kurento, Licode or Intel CS.
The Hard Way:
if firefox browser: use MediaRecorder api to record each remote stream, send them to server and merge them together( may be with ffmpeg) and provide a link to user to see/download...
if chrome browser: you can record through each remote video stream canvas( what happens in RecordRTC internally), simultaneously request the remote peers to record their own audio on their side, upload them all to the server and provide link... yeah, good luck with syncing them all.

HTML5 audio, testing if playing with javascript

Alright so I have audio on my site, and I want a user to only be able to play one audio at a time, regardless of how many tabs or windows the user has open. So if the user starts a new song in a different tab, the other one stops playing. Quick disclaimer: I have it working right now, but it's not a good method. Right now I have it so that when the user starts an audio file, it creates a php session with a random id for the instance of the playback. Then if a song is playing, it constantly sends ajax to the server to see if the session id is the same as the song's playback id. if the id is not the same, the playback stops. So right now it's working 100% how I want it, but it's sending so many requests to the server so I know there has to be a better way with using cookies or something. Please help if you can.
This can be done with HTML5 Web Storage and Cross-tab communication. Check out an example here and here.

How do I send sound generated by Web Audio API from one website to another using socket.io and Node.js?

I am working on an application that involves sending the sound output from a series of webpages to a central page that plays all the outputs simultaneously. Right now, I'm using p5 (the Processing JavaScript library, which is basically just a wrapper on the WebAudio API), node.js, and socket.io.
I know it's possible to stream the microphone input to a server and then back to the client, but how would I do this with audio created in the browser with the WebAudio API? How do I turn the AudioContext output into binary data, stream it through the socket, and then play it back client-side? Any help would be greatly appreciated!

Capture Audio Input with flash or html5

I am trying to capture the microphone and send the recording to my server.. I tried this method here but it records only a big WAV and the upload can be slow sometimes.
Is there a way to capture the voice and compress it on the client side?
Best method would be to send the recording while recording, but I have no Idea if this is possible. (It works for YouTube Live Webcam recording, it must work for Audio only too..)
Hey check out this post where i replied to a guy with a similar question as you.
How do I embed a Flash audio recorder in my site
i dont know about client side compressing (i have looked into it before and couldnt find anything). But i know you can severely reduce the size of the file by limiting the rate of recording via these numbers here, where if i recall correctly 16 is 16khz recording
recorder = new MicRecorder(wavencoder,null,50,16);
also sending to the server is not that hard, just look up how to post data, because the wav file is essentially binary data
You can compress the file on the clientside using libmp3lame.js: https://github.com/akrennmair/libmp3lame-js
There is already a gitHub project that uses this library to record audio and save it in MP3 format directly in the browser:
https://github.com/nusofthq/Recordmp3js

Categories