I'm currently building a web application that requires a fairly large audio file (~50mb) to be accessible offline.
I attempted this with fetching a base64 string of the audio file from the web server, then modifying the DOM by adding an audio element that points to the base64 string with using data:. However, this does not work in Chrome for Android; due to this bug.
I'm wondering if there's a better solution to the problem that works on Chrome for Android.
Thanks in advance.
Related
Perhaps this is an unprecedented problem, because I have searched the Internet and there seems to be no feasible solution to this problem.
I'm making a chrome extension for download video. I can inject my javascript into the video webpage on another site. I need to get the cached data or stream played in the <video> with this script, and then save it in blob for downloading.
I've tried MediaSource and captureStream+MediaRecorder, but it doesn't seem to solve my needs. Is there any other API that can realize this function?
I have an asp.net web application that allows a user to record audio. I'm using code from https://github.com/nusofthq/Recordmp3js along with Matt Diamond's recorder files (modified for wav instead of mp3). Not sure if it matters but I'm using the updated API for mediaDevices.getUserMedia().
The recording works fine, the wav file is saved to disk, and if I listen to the file on disk I can hear the recording. However, if I try to play the audio back through the HTML5 audio control on the page, there is no sound. The length of the file matches what is on disk so I don't think it's because the audio control is unable to find the file.
I can post my Javascript if that will be helpful. I'm currently testing on localhost using Firefox. Firebug doesn't show any errors.
Please let me know if any additional information may be helpful.
Thank you!
The (quickest) solution was to reset Firefox. Wav files now play without any issues.
I'm saving a bunch of videos to IndexedDB, then displaying them again for an offline version of an app. I have an issue however where occasionally one blob video file will become corrupt. My investigation so far has revealed:
the video file is not corrupt because it's been re-rendered and is rendered in the same way as the other videos
the issue is when saving to the DB rather than retrieving from the DB
the issue occurs when running through both my local server and a remote server, it happens on the remote server more however
the issue seems to happen randomly i.e. I do not change any other variables to cause this issue
So I'm a bit stuck now, anyone have any ideas as to what the problem may be?
Thanks in advance :)
IndexedDB is not intended for storing big files and that is root of the problem. One direction where you can take a look is the file system API, unfortunately this API only works in Chrome (Nov 2014).
I have been having a very strange and seemingly unlikely problem. I made a custom python server based off of SimpleHTTPServer, which requires me to set all my own headers. I started using it to serve .wav files and while they would play in an HTML5 tag in chrome they would not replay (via setting currentTime=0 and calling play() again). If I hosted them on standard Apache server, however, they would replay just fine. I open dev tools and slowly added and removed headers to my python server until they started playing properly. It turns out that the missing element was the "Accept-Ranges: bytes" header. Without it the wav file will not replay and with it everything works fine. Does anyone know why this happens?
I've found this same thing -- browsers require the Accept-Ranges header when playing audio via the <audio> tag. In my case, this was happening with MP3s (I didn't try with WAVs).
I don't know why that happens, but if you want to avoid it, use the new Web Audio API. In my experience, Chrome/Safari/Firefox will play (and replay) audio just fine without the Accept-Ranges header if you use the Web Audio API. Here's a good starter article.
Say I have a webapp which executes in its entirety on the client-side. Its purpose is to act as a file conversion utility, for example converting a user's local stored word document into a PDF.
So with the user's permission, the app can read a specified local file and process it, in memory, into PDF format.
How can I get the user to 'download' the result? since the data is held in the browser's memory anyway, I do not wish to upload it to some server.
[edit]
No flash based solutions
Expected file sizes to be up to 15mb
The solution for my case will be to use the HTML5 FileSaver API.
Perhaps this question should just be closed as it is effectively a duplicate of
Using HTML5/Javascript to generate and save a file
Thanks to aefxx