Download enormous Base64 in Javascript - javascript

I have a Javascript widget that creates .wav files. After running it, a Base64 representation of the file is generated, so that the user can play it in the browser. To download it, I then put the Base64 as the href of an element with the download attribute and programatically click it.
This all works fine and relatively quick for small files. However, if my Base64 exceeds about 2^21 characters in length (only 16 seconds of audio!), I get no download window to open.
Is there any other way I can get the download to work with files this large, without having to first upload the files elsewhere?
Edit: I'm using the latest version of Chrome. Firefox doesn't seem to have this issue.

Related

Workaround to download files larger than 50MB using Google Script [duplicate]

I'm running URLFetchApp Requests to an Amazon S3 Server to pull Audio Files and relocate them to Google Drive. The HTTPResponse comes back in XML format.
I run the following code to convert into a workable blob that can be stored in Google Drive:
/*driveAppFolder, fileName, response are pre-defined variables from earlier in the program*/
var responseBlob = response.getBlob();
var driveAppFile = driveAppFolder.createFile(blob).setName(fileName);
This code works flawlessly up to a certain size. I haven't figured out the limitation yet, but I know a 50MB file (52657324 bytes) will prevent the blob from generating with the error:
InternalError: Array length 52389150 exceeds supported capacity limit.
I realize a similar JavaScript error was handled here, but I am locked in the confines of Google Apps Script currently. Is there a way I can work around this sort of limitation and get the blob made?
How about this answer? 50 MB is 52,428,800 bytes. At Google Apps Script, there are the limitation of the size of blob. The maxmum size is 52,428,800 bytes. So in your situation, such error occurs. In your situation, you download such large file. When you download it, how about using the following methods?
Use partial download by range.
Use a library for downloading large files from URL.
This library uses the partial download.
References:
Partial download
Sample script of partial download
Library for downloading large files from URL

How would I go about packaging an mp3 file into an mp4 container?

So here's the issue that I'm currently having. I need an audio player for iOS that will play mp3. Now at first glance this may seem like a trivial issue, just create an audio tag and give it the URL to the mp3 file. While this technically works, it's basically unusable since iOS needs to download the entire file before starting to play it. This results in a really long wait time when trying to play large mp3 files (could get close to a minute).
So the first thing I tried was to manually mimic the chunking that chrome does for playing mp3 files. I first sent a HEAD request to get the byte length of the audio file. Used that length / duration in seconds to get the average bytes per second and use that data to request chunks based on where the user seeks to. That didn't work since sometimes mp3 files contain metadata that throw off the calculation (like a cover image). Additionally, sometimes mp3 files use VBR (Variable Bit Rate) and then I'm well and truly screwed.
So this lead me to thinking, Safari couldn't possibly require the end user to download an entire mp4 file before playing it. So I took an mp3 file, converted it to mp4 on an online converter and tested my theory out. Voila, it worked. Safari was streaming the mp4 file in chunks and the wait time went to close to 0. Alright, so now all I need to do is convert mp3 files to mp4 files. The problem now is, I have requirement not to use my server for converting these files. I want to offload this expensive operation to the client. After looking around for a bit I found a few wasm libraries to do this, great! Nope. These wasm libraries are huge (24 MB) and would add an unacceptable amount to my already large bundles files. So this brings me to my question. Is there any way to "trick" safari into thinking that my mp3 file is mp4. What I've tried already:
On input change event -> get the file -> clone it into a new Blob with a mimeType of video/mp4 and then upload that file to the server. Chrome plays this file no problem (probably because it detects it's an mp3 file), on Safari however it's unable to play the file.
So my question is, is there any way to package the mp3 file in an mp4 container (Client Side !important) to "force" Safari into chunking the file.
Is there any way to "trick" safari into thinking that my mp3 file is
mp4
mp4 files are not seekable because the client "thinks" they are mp4. They have an index in the file that is required for the seeking to work. That index does not magically exist because the mime type was changed.
is there any way to package the mp3 file in an mp4 container (Client Side...
Yes, totally. But you must write the code and it is very complicated. You can read ISO 14496-12 document to understand how mp4 files are structured. and ISO 11172-3 and ISO 13818-3 to parse the Mp3 into frames that can be written to the MP4
I did this very thing last month, i only needed it for a 128kbps CBR mp3 live stream so i hard coded something to support that specific format, it can be modified to specifically support different bit rates though, but probably not VBR :/. Posting it here in case its of use to anyone dealing with firefox not playing an mp3 using mediasource extensions: https://gist.github.com/fanfare/0fa525af28b275fd6623942d7e9d70dd

Downloading an mp4 file using javascript

How do I allow users to download mp4 files from a different server that isn't owened by me? No approach I've come across has worked so far. Here's what I've tried:
The download attribute for a tags: Download - not working for me (as in - the attribute doesn't have an effect. Tested in Google Chrome)
Place a hidden <iframe> on the page - doesn't work either since I can't change the MIME-type, the video simply gets played back
Download using ajax - not a good solution as well, since this loads the entire file into the user's RAM. Some videofiles are 1GB+.
Is there any other method? Thanks!

The file upload form is different in Chrome and Firefox. Why?

I have a normal file upload code in HTML page through which I will upload a file. The problem is I am using the complete file URL later in my Servlet. In Firefox there is a textbox in which complete URL is coming, so my application works fine there, but in Chrome only the file name with extension is coming, so the file is not uploading the file.
If I am not clear in language, then open this link in both Chrome and Firefox and observe.
Is there any solution so I can use the URL(imagepath) in chrome also??
You cannot get the path of a file from your local system from any modern browser except IE because of security reasons. Only the file name is returned.
It's the business of none of the websites to track from which local location the file is coming from. You have many ways to upload a file onto the server, regardless of where it is in the local file system.

Save a loaded picture from firefox extension

From within my firefox extension I want to save a picture which is already loaded and shown in a browser tab. I only found ways to download a file or picture directly from the server with a binary input stream passing the url of the picture. But this is not what I want to do here.
So, how can I save a picture which is already loaded by firefox to a local file?
You can create a file in your add-on and convert binary image data into base64 and dump that encoded data into that file.

Categories

Resources