Offlining media files in Phonegap 3.0 - javascript

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?

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/

Uploading an mp3 file with no backend

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

Force the browser to download videos from third party website

I have this problem. I have a website which has URLs to videos from different website (not in my servers). What I exactly want when the user clicks on any of these link the video in remote website is downloaded. But what I have now when the user clicks on the link the video is open and show on the browser instead of download. I created a source code in ASP.net and C# that could force the browser to download the video, but the problem here is that my server should process the downloading operation to the browser, in other word that data should pass through my server to the client browser rather than from the third website to the client directly.
This will have two problems
it waste my server resources and effectiveness because the data should be processed through the server
it will increase the In and out bandwidth for my server and all the files are videos so it will be very costly.
What I want now, is there a way that enables me to force the browser to download the file directly from third party and without passing data through my server by using JavaScript, jQuery, or any client side techniques?
The html5 download attribute could help here. I haven't tested it personally but this blogpost says adding download should force a download on the browser side.
Example code:
Download

Acquire Video File Metadata From S3

Setup: I'm working on a video upload tool. I use a 3rd party javascript library that loads content from a users various storage locations (Hard Drive, Dropbox, Facebook, etc )
The library pushes the videos to our S3 bucket and returns the url of the uploaded file.
Goal: I would like to get the metadata (Height / Width / Duration / Etc) about the video without having to load the entire video binary.
Context: I use a service that handles video transcoding, and eventually posts the transcoded metadata to one of our backend servers. The transcoding can take a few minutes.
I need to get the temporary metadata of the uploaded file, but i don't want to load the full video.
Setting preload="metadata" on an HTML video tag means the browser is supposed to fetch metadata but not the whole stream. It's only considered a hint, i.e., browsers are not required to follow it, but you could try it and see if it works on the browsers you need to support. What it should do, I believe, is fetch just the first part of the video file, so it can read the header.
If that doesn't work, you probably need to implement a separate Ajax call to fetch the metadata. Hopefully your transcoding service gives you the metadata in a way that you can access it server-side. Otherwise you might need to extract it yourself, on the server. For example, you could use the ffmpeg library (or spawn an ffmpeg command line process) to parse out the metadata.

Reloading file often in Web Audio 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.

Categories