Playing web audio offline on mobile Safari. Mission impossible?
Tuesday, May 29th, 2012
-
Twitter is a great medium. I often feel that as a remote worker it has changed the way I work. Today thanks to some helpful fellow Tweeters I was able to determine whether it was possible to cache audio in mobile Safari in double quick time. Here’s the write up.
-
Wondering if it’s even possible to store an mp3 in localstorage in mobile safari.0
likes·
0
comments -
Bruce Lawson. Web Evangelist, Opera.
-
@maboa why wouldn’t it be? Space limits?0
likes·
0
comments -
Robert Nyman. Technical Evangelist, Mozilla.
-
@maboa Turn it onto a string, and then store?0
likes·
0
comments -
@brucel @robertnyman Well I’m pretty new to local storage but it appears there is a 5MB limit unless you use the local DB? Then 50MB?0
likes·
0
comments -
@robertnyman @brucel so to take advantage of 50MB I need to put it in a Web SQL format – I’m guessing a data URI would do.0
likes·
0
comments -
@maboa @brucel I think the key things are, like you say, size and then make into a Data URL. More info at http://html5doctor.com/introducing-web-sql-databases/
0
likes·
0
comments -
@robertnyman @brucel Shame the file api isn’t pronto http://caniuse.com/#feat=fileapi0
likes·
0
comments -
So the first port of call the file api is out because it’s not supported by mobile Safari.
-
@maboa @brucel I wrote http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/ and http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/, that might be interesting0
likes·
0
comments -
Matteo Spinelli. Freelance Developer.
-
@maboa couldn’t find a way to cache audio on iOS. did’t try with BlobBuilder/FileReader, though http://www.html5rocks.com/en/tutorials/file/filesystem/0
likes·
0
comments -
@cubiq Thanks! My gut feeling is that it isn’t possible. Won’t stop me trying though 0
likes·
0
comments -
@maboa nope, just tried with blobbuilder+filereader, it works on chrome, still no go on iOS0
likes·
0
comments -
Andrea Giammarchi. Software Engineer. NOKIA.
-
@maboa encoding/decoding takes a while plus more space as base64 … but it kinda works0
likes·
0
comments -
@WebReflection Thanks. May be an acceptable price to pay. This is where I’m up to http://jsfiddle.net/Yz9vD/ /cc @cubiq @brucel @robertnyman0
likes·
0
comments -
Note the subtle error in my markup. Alas this is not the problem.
-
@maboa that won’t work in iOS in any case. I have the same in http://fuckn.es and still that bloody error as soon as you play the audio0
likes·
0
comments -
@maboa @webreflection @brucel @robertnyman ?! the operation could not be completed0
likes·
0
comments -
@maboa @cubiq I filed that bug during iOS 5 beta for developers … they accepted it then still nothing is working as expected :-/ #meh0
likes·
0
comments -
Turns out mobile Safari doesn’t support audio as a data URI. A simpler example here : http://jsfiddle.net/Yz9vD/2/
-
@cubiq @webreflection You’d think they were doing it on purpose! Images work BTW http://jsfiddle.net/Yz9vD/3/ and this is wrong http://caniuse.com/datauri0
likes·
0
comments -
@maboa @cubiq img does work for sure … audio API wants explicit user interaction first on iOS and even at that point dataURI fails :-/0
likes·
0
comments -
@maboa @cubiq said that, do not expect *ever* dataURI to be synchronous, it’s still async as a normal request so load() then play() /onload0
likes·
0
comments -
@WebReflection @cubiq All I want to do is play audio in my web app while offline. If it is local it should load fast.0
likes·
0
comments -
@WebReflection @cubiq Hmm worth a try. Guessing though at that point there’d be no getting around the 5MB limit.0
likes·
0
comments -
@maboa @cubiq manifest limit is 50Mb, not 5, 5 is only localStorage or sessionStorage ( not sure about the last one thought )0
likes·
0
comments -
@WebReflection @cubiq Hmm worth a try. Guessing though at that point there’d be no getting around the 5MB limit.0
likes·
0
comments -
@WebReflection @cubiq Crazy. Gonna write this up. Thanks for all your help. Managed to isolate the issues super fast. + @robertnyman @brucel0
likes·
0
comments -
@WebReflection @cubiq Cool! I may try in parallel just to get a feel for things.0
likes·
0
comments -
@maboa call it .appcache and add “AddType text/cache-manifest .appcache” to .htaccess. if you can’t use .htacc set it with PHP0
likes·
0
comments -
@cubiq Ah yes, thanks. http://happyworm.com/jPlayerLab/locals/v03/ Page caches but the audio doesn’t. I guess that’s it then. /cc @WebReflection0
likes·
0
comments -
@maboa @cubiq trying this with one OK at first attempt then failures all over after … http://www.3site.eu/ios_audio/0
likes·
0
comments -
@WebReflection @cubiq (iOS 5.1.1 iPad) If I turn my wifi off and reload, the page reloads but it says ‘cannot play audio’.0
likes·
0
comments -
So looks like mission impossible right now. If anybody knows a way of doing this I’d love to hear from you!
Tuesday, May 29th, 2012
Uncategorized
2 Comments to Playing web audio offline on mobile Safari. Mission impossible?
Leave a Reply
RSS feed
Previous Posts
- The Hyperaudio Pad – Next Steps and Media Literacy
- Breaking Out – The Making Of
- Breaking Out – Web Audio and Perceptive Media
- Playing web audio offline on mobile Safari. Mission impossible?
- Flash vs HTML5 Video and the Codec thing
- Altrepreneurial vs Entrepreneurial and Why I am going to Work with Al Jazeera
- HTML5 Audio APIs – How Low can we Go?
- Hyperaudio at the Mozilla Festival
- The Hyperaudio Pad – a Software Product Proposal
- Introducing the Hyperaudio Pad (working title)
- Accessibility, Community and Simplicity
- Build First, Ask Questions Later
- Further Experimentation with Hyper Audio
- Hyper Audio – A New Way to Interact
- P2P Web Apps – Brace yourselves, everything is about to change
Tag Cloud
-
Add new tag
AJAX
apache
Audio
band
buffered
Canvas
CDN
chrome
community
custom tags
firefox
flash
gig
HTC
HTML5
Hyper Audio
internet explorer
java
javascript
journalism
jPlayer
jQuery
jscript
LABjs
leopard
media
Mozilla
opera
opera mini
osx
P2P
Popcorn.js
poster
prototyping
rewrite
safari
Scaling
simplicity
SoundCloud
timers
tomcat
video
Web Apps
web design
[...] cached audio for offline use on iOS Safari has long been a challenge that has proved to be mission impossible. But with the advent of the (WebKit-only) Web Audio API, it is now finally achievable — although [...]
[...] cached audio for offline use on iOS Safari has long been a challenge that has proved to be mission impossible. But with the advent of the (WebKit-only) Web Audio API, it is now finally achievable — although [...]