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.
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/
Does anyone have any thoughts as to why a recording would get truncated when using HTML5 audio? It only seems to happen when the recordings are around a minute and a half. The audio usually gets truncated around 30 seconds (or less). Shorter recordings do not get truncated.
We're using Matt Diamond's recorder.js functionality. There can be more than one HTML5 player dynamically created on a page (up to 5), but the number of players don't seem to be part of the issue as the truncation happens when there's only 2 players on the page.
The buffer length is 4096. The audio is saved out to file on disk as a wav file. The user can hear the full audio recording when they play it back through the HTML5 player if they're still on the same page, but the file that is saved out is truncated.
Any ideas on why this happens or how to overcome it would be greatly appreciated!
I forgot to mention this is in an asp.net web application. We use Sox in the code behind to normalize the audio file prior to saving it to disk.
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).
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