There are a ton of SO posts on audio, HTML5, and mobile Safari, such as these:
Reusing HTML5 Audio Object in Mobile Safari
Autoplay an Audio File on Mobile Safari
Preloading HTML5 Audio in Mobile Safari
Will HTML5 support the access of offline cached audio?
However, they all are outdated.
We prefer solutions to support iOS 3+, but we will take anything that works -- even if it's restricted to iOS 5.
Anyone have the definitive answer as things stand today, or testers on iOS 5 have any insights?
Can audio files be cached in mobile Safari? If so, what are the limitations?
Is there a way to minimize lag or delay between pressing a button and playing a sound?
Thanks!
I recently wrote an HTML5 audio player. I had similar trouble with iOS4 and iOS5. First, the play has to be triggered by user input, meaning specifically that it has to be in the same call stack as a click event.
I tested this a lot, and iOS seemed to refuse to cache the audio at all. It fetched the audio with every play. I think this should be considered a bug, but perhaps they are trying to preserve local storage space (audio files can get rather large).
If your audio files are not too large, you might want to consider appending them together into a single file and then using pause / jump to position / play to switch between sounds. I haven't tried it, but it should work. I didn't use the technique because my app was a music player, and music files are a bit too large for that technique to be valuable.
Related
The context is: iOS 9.3.2 Safari.
I'm making audio visualization on a web page. If i use the <audio> tag, play it and turn off the iphone then the audio keeps playing. But Safari doesn't support Web Audio API through streaming - AudioContext.createMediaElementSource() - so i have to buffer and decode the entire audio file in order to visualize it - AudioContext.createBufferSource().
In this case audio stops playing when i turn off the iphone.
My current solution is to add, besides createBufferSource, the <audio> tag with a tiny silent mp3 source file that loops all the time. In this case everything works fine - the iphone, when turned off, plays both the silent mp3 & the buffered real mp3.
The question: Is there a more straightforward solution (meta tags, manifest, etc.)?
btw Android 5.1 Chrome keeps playing the buffered audio as is and desktop Safari supports createMediaElementSource
I'm working on a mobile web app and want to allow for continuous playback of HTML5 audio or video in both Android and iOS (i.e. queue up a playlist of YouTube videos or Grooveshark songs and have them all play in a row automatically).
Android doesn't seem to be an issue, but everything I've read has suggested that Safari prevents audio from playing unless it's initiated by a user, and prevents continuous play if the screen becomes locked.
That said, Grooveshark's mobile web app will play an entire playlist of songs in my iPhone 5 (iOS 7). It'll play the next song even if I'm in another Safari tab or I lock the screen.
So the question: How do they do that?
This code (jQuery) works for me in iPhone Safari iOS7 for continuous playback. Even if I have my screen locked/other tab it changes track when the first has ended (given a bit of patience for the new track to load)
<audio id="audio1" src="song1.mp3" controls></audio>
<script type="text/javascript">
$('#audio1').on('ended',function(){
$(this).attr('src','song2.mp3');
$(this)[0].play();
});
</script>
I've read has suggested that Safari prevents audio from playing unless it's initiated by a user.
=> That is true and is by design - no work around known as of today (well ... I have seen ugly attempt to make it work).
I have been doing some research into what is possible, as far as I can tell
Autoplay
Possible to autostart videos on early versions of IOS http://www.codeblog.co/getting-autoplay-working-on-ios/ although this no longer works on current version (exact version it stopped working I don't know). Behaviour seems to be the same on both the iPad and iPhone?
Playing video in page
On the iPhone videos always pop out to player, its not possible to play in page.
However is possible to play videos in page on the iPad - have tried out the videos on here and they do play inline.
http://www.html5rocks.com/en/tutorials/video/basics/
Playing as intro video
May be able to do an enter now button for the site with below code to trigger
<input type="button" value="Play" onClick="document.myMovie.play()">
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10
Could then on iPad make this take the full screen in page in website and use js to detect when the video finishes. Am thinking on iPhone may not be possible to detect when video finishes?
Can anyone clarify what is possible?
As much as I know intro video aren't too popular, this is a requirement for the site.
Automatic play is not possible on iOS as fas sa I'm aware. They removed support on purpose to stop people from doing it.
Any playback now requires the user to actually specify for the video to play, so providing a button to play it should be fine?
Can't you keep your video in the bundle and play it with MPMovieePlayer.Then you won't need to autoplay the video,the video will be played autometically itself.As I do the same thing.
I'm trying to build a web application for iPhone and Android that deals with audio input.
Is this possible?
Apparently ... yes, or it should be able to when it's finished at least. It will supposedly become possible using the device API which is due to be part of HTML5 when it's finished and released (HTML5 isn't finalised yet however, and information is subject to potential for change).
W3C Device API Requirements (camera section)
Sony Erricson community blog posting, with examples (pre-final API)
While it isn't explicitly mentioned in the W3C spec, audio recording as part of (web)camera interactions is, so it's definitely hopeful. There seems to be a shortage of good information at this stage though. I'd expect to see more as HTML5 comes closer to being finalised.
As of now, HTML5 Can't record Audio. but in future, it will be able to, by using the Device's native features.
HTML 5 can not record audio (at least currently). HTML basically is a markup language and therefore only declares how a browser should display certain content. Although HTML 5 introduces new features that make some interaction possible, you can't record audio straight into.. HTML (even saying that sounds wrong). When the HTML5 spec is finished, it might become reality, until then, no way.
Web applications that record audio normally require a plugin like Flash or Silverlight, because those can access system resources like audio hardware. Both are a no-go on iOS, although Flash is theoretically possible on Android, I don't know if it supports audio input.
I would suggest you write a native app (for iOS and Android) that can access the audio hardware and connects to your web application in the background, so that the recording takes place natively and the recorded audio will be transmitted to your servers (think of Shazam, for example).
Here are the basic developer guides on recording audio in:
Android
OS X, iOS
A new MediaStream Recording API is being worked on. It is currently availble only in the Firefox Nightly build for demo purposes
Here's the draft with the latest updates directly form W3C site:
https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html
Also the following article covers up other attempts on recording audio and video directly in the browser:
http://hdfvr.com/html5-video-recording
I'm looking for a way to play videos, or rather, show a frame-by-frame animation with the built-in web browsers of iPhone and Android devices.
Conditions:
It must be played inline on the built-in mobile web browsers
The videos are 240x240 in size and around 10 seconds in length
They were originally .swf files containing Flash animation
HTML5 video tag is disqualified because there is only fullscreen playback on iPhone devices.
Any ideas?
Do you need a mobile phone solution, or you have access to a web page?
You can always try to use timed javascript to switch images with a set interval.
maybe, you could try using the image and update your web browser every time, but it's probably very ugly solution;