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.
Related
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/
i want to setup a simple Queue Number calling website as a terminal. the terminal will poll server to get the latest number to call.
my codes preload 10 simple audios. Then the codes will poll the server each sec to see which file to play sounds through ajax request.
with Firefox, the audios get preloaded and each time the server send action to play, the audio will play WITH preloaded file ( no request to the audio file from server )
with Chrome, the audios get preloaded initially but each time the server send action to play, the audio will be requested from the server even though it is the same file.
using angularJS 1.x
i have test by changing SRC in the audio object, initialize different audio object for each file but Chrome still wont play the cached files. Always request the same file from server
!SOLVED!
a very silly mistake i have made. Im using PHP built in web server to develop this. so i neglect the http server part.
just a simple .htaccess script on the folder for audio access to send cache-control did the trick.
thanks to #Kaiido for the tips
i see in sites like youtube, soundcloud, spotify, that they stream their contents (audio or video) in small chunks.
For example, when i load an audio on soundcloud, the server response an small piece of the complete archive, then, before of consume this chunk, the browser sends another request with the next chunk and repeat this process until the complete file is consumed.
What is the name of this technique? How can achive this?
Currently i have an nodejs server that streams audio files and accepts range headers.
I load this files in the browser with html5 Audio API, but the browser loads the entire file and i can't able to achive the behaivor mentioned above.
This is a configuration that i need set in the client (Browser)? this is related with .m3u files?
I attach an image of the Network tab in Chrome dev tools of the behavior mentioned above.
https://i.stack.imgur.com/COOCd.png
Chunks
I'm using Web audio api decodeAudioData() method to decode audio files (45min duration, about 40MB, mp3 format) stored on my ubuntu web server. When user enter on some website page I need to preload Audio file, but it takes too long, about 1min 10s. Is it possible to do something to speed up this process? I'm getting arraybuffer through xmlhtttprequest and then decoding it, but it is very very slow.
EDIT: I was tottaly wrong. After measurements I realised that problem is in downloading file. Processing is only 10 secs which is good.
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?