I have an HTML5 web-app that has sound effects. I'm trying to get these effects working in iOS5 and can't for the life of me.
Wondering if anyone has any work-arounds to get JS control of an HTML5 audio/video control in iOS5.
Or even a way to control multiple audio files with one click. As it stands right now, if I have 10 sound effects, I'd need 10 user clicks to get control of all of them, which is absurd!
I have an HTML5 web-app that has sound effects. I'm trying to get these effects working in iOS5 and can't for the life of me.
Wondering if anyone has any work-arounds to get JS control of an HTML5 audio/video control in iOS5.
Or even a way to control multiple audio files with one click. As it stands right now, if I have 10 sound effects, I'd need 10 user clicks to get control of all of them, which is absurd!
Share Improve this question edited Nov 8, 2011 at 7:59 skaffman 404k96 gold badges824 silver badges775 bronze badges asked Nov 8, 2011 at 0:09 user578895user578895 4- 1 Apple does not allow autoplay on there iOS's as far as I know, it has to be initiated by a user click, also you can only play one file at a time for video and probably same for audio – ryuutatsuo Commented Nov 8, 2011 at 5:47
- I can overlay sound tracks just fine, I just need permission for each one to do so... – user578895 Commented Nov 8, 2011 at 13:51
- Just as @andrewh mentioned it is user activated, so why don't you overlay a transparent div over your entire app which when the user touches you remove and activate your audio, this way it was a user interaction. This is more of a hack. Or trigger the audios by any other button you might have in your app that requires clicking – ryuutatsuo Commented Nov 8, 2011 at 15:23
-
don't need to overlay anything, I can catch clicks up to
document.body. Part of the issue es in that I can only activate ONE audio file per click, so the user would need to click 10 times if I want control over 10 sound effects. – user578895 Commented Nov 8, 2011 at 16:57
3 Answers
Reset to default 7Absurb, but you have to see it from iPhone or any mobile phone's point of view. It is a mobile phone going over a cellular network with bandwidth limitations, which many people know about from the recent Sprint mercial. They do not want users going over their bandwidth limit because some site is sending their phone a large amount of data without them taking action themselves.
The following is an excerpt from the official Safari Developer Library with more details.
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie:
<input type="button" value="Play" onClick="document.myMovie.play()">This does nothing on iOS:
<body onLoad="document.myMovie.play()">
Due to Apple, they have restricted the auto-play features to prevent cell data charges. In xcode4 i added a workaround though. In your "webViewDidFinishLoad" Send a javascript call to auto play the video and it works. I tried this in the html file with regular javascript but it did not work. Doing it through webViewDidFinishLoad did the trick though. In this example i want to auto play the video on my index.html page. I have a javascript function on that page called startVideo().
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSURLRequest* request = [webView request];
NSString *page = [request.URL lastPathComponent];
if ([page isEqualToString:@"index.html"]){
NSString *js = @"startVideo();";
[myWebMain stringByEvaluatingJavaScriptFromString:js];
}
}
And here's my javascript function:
<script>
function startVideo(){
var pElement3 = document.getElementById('myVideo');
pElement3.play();
}
</script>
And here's the html in case you're new to html video
<video id="myVideo" poster="index_poster.png" width="1024" height="768" xcontrols autoplay="autoplay">
<source src="flow.m4v" type="video/mp4"/>
browser not supports the video
</video>
Have you tried something like this??
function clickedOnce(){
$('audio').each(function(){
this.play();
});
}