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/
Related
I'm making a music visualizer, and it's functional if the mp3 file is in the repository. So any songs it plays have to already be downloaded by me. I want to create kind of a drag and drop option where users can put mp3 files and then watch them being played. However, if at all possible, I'd like to avoid building an entire backend just for this one feature.
Is there a way to temporarily store a user file, which disappears on refresh?
It sounds like you're looking for the FileReader API, which allows you to work with files in JavaScript after the user chooses them from a file picker. You can find more info here.
Googling "JavaScript FileReader sound" returns a ton of results, including:
JavaScript / HTML5 audio: play mp3 file loaded by user via file selector in Android Chrome
JavaScript Play Uploaded Audio
Play audio local file with html
decode & play a song using html5 file api
I am grabing a rtmp stream video and recording a MP3 file in a server, using java (I can record it in my PC, as well). I need to load this file in Web Audio API, considering that is constantly being updated, and play it like real-time stream. So, I am reloading the file quite often as I need real-time stream.
Theses are my options/problems:
I try to load the file using < audio > tag (which I have to load every second) (MediaElementAudioSourceNode), I can't play it because the file which I've store in the server is not seekable and when I use play(), I'm not able to play with a offset.
I try to load the file server using buffers(XmlhRequest + decodeAudioData)(AudioBufferSource), AudioContext.decodeAudioData causes heap to grow without bound.
Given a windows server backend, is there a way to implement a pure javascript/html5 client that would be able to play only a designated part of the video file (e.g. from 10th second to 15th on a 2 hour video)?
From what I know, standard html5 video tag will download an entire file which is not suitable for my situation.
Streaming solutions on the server would probably be an answer, but are there any that would work with pure javascript/html client? Thanks.
To do this you should encode your video into one of the segmented/fragmented format like MPEG-DASH or Apple HLS. The result will be a playlist file and 1 or more media files containing 2 to 10 second fragments of your (long) video file. For DASH you will normally have 1 fragmented MP4 file containing 2 second fragments of video, the playlist file will tell your player which parts of the file to download corresponding to the time you wish to play. For this to work your web server needs to support HTTP RANGE headers (which most do).
For HLS you will normally end up with multiple 10 second files. The playlist file will tell the player which file to download for the time to play.
Here's how to build a HTML5 player to play DASH streams:
http://blogs.msdn.com/b/interoperability/archive/2014/01/03/mpeg-dash-tutorial-embedding-an-adaptive-streaming-video-within-your-html5-application.aspx
http://www-itec.uni-klu.ac.at/dash/?page_id=746
Besides complex methods like HLS or MPEG-DASH you can consider using pseudo-streaming, or progressive download. Its seeking capability supported by a number of media servers will allow you to watch the MP4 video from any moment. Using Javascript you should be able to actually setup play and stop when you need (but that's up you to deal with different browsers handling playback in HTML5 video container).
Using the Phonegap media API, it is possible to play back external files hosted on a web server.
Once that file has been played, I wonder if it is possible to save it locally, so that the next time I listen to it, I can get it from a local path rather than from a URL? This is what I mean by "offlining".
However, there is no save() method in the media API. Is the file stored in a cache so that I can pick it up using the file API (provided I knew the path)?
I suppose one solution could be to download the file and then play it, but I don't want to keep the user waiting for the download to finish. I want to start playing the media file a s a p. Is it possible to start playback before the file has downloaded completely, using progressive download, for example?
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