I am writing a web app that uses HTML5 audio. I want to make sure that the user can move to a different application while still listening to the audio in the background. This works while the web app is still within Safari itself. However, when the user adds the web app to their homescreen and it has been set to allow for fullscreen access (no Safari toolbars), when they leave the app the audio does not continue to play. Does anyone know of any way to have a web app proceed while in the background?
Thanks.
I observe exactly the same thing. It's really puzzling as to why Safari, webkit on iOS I suppose really, handles it differently in the two cases.
I notice one thing that might be a small clue, when running as a home-screen'ed 'app' when you playback the audio the iOS status bar (at least on my ios4.1/iphone4) does NOT show playback indicator (blue triangle). But when using the site directly via Safari (and the sound stays in the backgroun as expected) it DOES show the playback indicator.
I think the only people who can probably answer your question are apple since it's their webkit implementation. If you haven't already I would urge you to take this up on the apple developer message boards.
For others not familiar the 'full screen access' Dan is referring to is a Safari specific meta tag that enables a bookmarked web page to open in safari 'full screen' without the location and menu bars.
While HTML5 is making progress on supporting device native features through HTML 5 APIs (such as accelerometers, etc) having true background audio seems like it hasn't really been spec'ed out yet. By background I mean when the browser is not the application that the user is currently focused on. It was only more recently that iOS even supported application multitasking which is what making the behavior from safari possible but it's a separate thing together to integrate that tightly with the OS'es native audio control features, which is what would need to happen.
This is not possible, at least not currently. You are playing the audio from the browser and when the browser closes the system kills the app, or freezes it, unless it has multi-tasking support(but that isn't allowed for web apps)
In iOS 5 and Android 4.0.3, putting a browser window to background does not stop playback. I am not sure about other versions prior to them.
You can do so with an iPhone 4. On my website, I posted a song with the simple html5 tag and I went on it with the iPhone 4. Played the song, left the app. Song runs in the background and there is even a play button on the top bar like when you listen to music on the iPod app.
Related
Environments
iOS 14.4.2 (safari)
chrome 91.4472.80
As I was trying to find a way to prevent my iPhone going to sleep while a browser page is opened, I found 3 ways.
use Screen Wake Lock API
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
call window.location.href periodically and stop it
play a video with a user interaction
For #1, this doesn't work on iPhone, should work on Android.
#2, didn't seem to work on either safari or chrome on iPhone.
#3, also didn't work (even playing a video after user interaction).
I tried https://github.com/richtr/NoSleep.js/ but didn't prevent from sleeping.
I also tried https://github.com/roldanjr/use-stay-awake and it opened a blank video in fullscreen (this maybe fixed by just adding https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline)
Then, I noticed browser version of Youtube preventing my phone from sleeping while it's playing a video (I set my sleep time for 30 seconds, and it can play a 10 min video without turning itself off).
Does anyone know what kind of technics they are using to do that?
It appears that Safari 11 on iOS will pause the video capturing during a WebRTC session when the browser/tab is moved into the background; meaning the remote client will just see a black image unless the video capturing browser tab is currently in focus. I can understand why it would do that*, but I could not find any official statement or documentation about this behaviour.
* (Both for privacy and resource conservation reasons.)
Is this the expected behaviour or is there anything that can be done about this?
It looks like expected behavior in our experience. Similarly, a native iOS app cannot capture video while in background.
The behavior is the same on other platforms, e.g. Chrome on Android - both when backgrounding the browser or the WebRTC tab.
My research tells me that there is now way to escape fullscreen video viewing in iOS browsers on iPhone or iTouch. It also seems there there is no way to modify the native controls that are displayed along with the video. Is the user in a total blackbox while viewing video in this case?
I'm trying to find someway for a user to indicate that they like a video as it is playing. Is there anything I can do that isn't a hack? If not is there any indication from Apple that they will ever be willing to change this? I'd rather not make an app out of this project.
You actually can play a video in line on an iOS browser, if this is what you are aiming for although there are restrictions - updated answer:
Play video inline in a browser on iOS
Safari on large screen iOS (iPad) should support inline video (I don't have iPAD hand to verify this still works...).
Safari on 'small screen' iOS (i.e. iPhone) will not support inline video as standard. There is at least one workaround which will allow it but this does bypass much of the native video playback performance gains so it may not meet your needs. It is a work in progress still as you will see from the link, but try the demo on an iPhone browser - you need to hit the small play button beside the video, rather than the one on top of the video at the time of writing:
https://github.com/newshorts/InlineVideo
Playing inline in a UIWebView on iOS
Take a look at this Apple Developer page:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html#//apple_ref/doc/uid/TP40006950-CH3-SW31
In particular:
allowsInlineMediaPlayback
A Boolean value that determines whether HTML5 videos play inline or use the native full-screen controller.
and:
Discussion
The default value on iPhone is NO.
In order for video to play inline, not only does this property need to be set on the view, but the video element in the HTML document must also include the webkit-playsinline attribute.
When I go to m.youtube.com on my iPhone (Chrome) to watch videos, I assume that YouTube is using the HTML5 <video> tag to display them.
However, when I watch a video with a commercial, dragging the seek button makes it jump back to it's original position before the seek. In other words, it is impossible to control your position in the commercial.
It feels like a violation of the divide between browser content and the browser. This isn't a native app, it is a website. How are the iOS video control elements being manipulated by HTML? It seems that this should be impossible, just like it should be impossible for a webpage to access a phone's photos or switch applications.
If it's running inline in the browser, the site will have full script access to the controls - and it's very standard nowadays to prevent skipping/changing the playhead during ads. Some even get rid of the controls completely.
Though HTML5 video is a native browser function, it's still subject to javascript hooks. All one has to do is add return false to the onChangePlayhead event to lock the controls down. It's only when you remove the video from inline web and bring it into the native iOS app that it becomes untouchable by scripts.
I'm having a small web app, which plays really short sound bits on the click of several buttons. It explicitly targets mobile Safari on iOS (iPad).
After reading here and elsewhere about the several "shortcomings" of HTML5 audio in this context on mobile Safari and trying a few "hacks" and tricks, I'm stuck with a situation where Safari seems simply (for the lack of a better word) broken:
I can play sound A (it takes a long time for it to start — I'm assuming it's downlading [again]?) on the click of button A. After that, clicking on button B will immediately play the sound A again. Same for button C. In some cases it will play a different sound, sometimes even the right one. But mostly sound A. The format in use was .aiff, is now .m4a .
After writing a few tiny versions myself, I decided to go with the Buzz library to handle the sound loading/playing/etc..
Funnily enough, their demo includes a game, which does pretty much exactly what I need and triggers the same faulty behavior. I even ended up in a situation where any audio player in mobile Safari in any tab would play a certain sound out of the Buzz demo game (!).
I was hoping a cache manifest might help overcome Apples preloading limitations and force the app to play the sound right after hitting the button in offline mode. But after confirming that the whole app had been cached, I can't play/hear any sound in offline mode.
Has anyone managed to get something like this to work somehow? (— Having seen how Apple handles certain things, I' don't expect much response, though… )
Update 1:
The example in this answer causes the same effect: How to synthesize audio using HTML5/Javascript on iPad
Update 2:
Updating iOS (and so Safari) seems to resolve the audio bug. The cache manifest doesn't seem to effect audio files, though. These files are just not available at all.
After removing the cache manifest the app works okay, but adding it to the "home screen" and reloading it prevents the audio from playing as well.
I wish I could tell you there's a magic formula to get all your html5 media to work perfectly, but there isn't. Mobile support for HTML5 audio/video is pretty poor right now; much further behind than its desktop predecesors. To make matters worse, each of the different platforms handle it differently and most of them only support it in semi-recent versions.
However, there are some tricks you can employ to get media files to work correctly in mobile Safari. In order to explain them, you'll need to understand some of its shortcomings.
1) You can't load multiple audio / video files
Its been my experience that the browser will only load one file at a time. If you play one file, go and play another, and then come back and it'll just load that file all over again. And, although I didn't try it myself, I don't believe a cache manifest will help you here.
What I had to do is combine all my audio files into one large audio file. Then, depending on which audio track was requested, I'd move the play position to the appropriate starting position and play that track. Then, I'd use a setInterval to examine the playback every few milliseconds to determine if the current play position hit the end of the track. Once it did, I paused it. Pluis, I gave myself a few seconds (2-3) between each track, just in case the phone's CPU was under a lot of load and checked the feed a little too late.
2) You can't auto-play audio / video files
Apple built into their HTML5 media tag technology the limitation that these tracks would only load and play in response to a user click event. That way, developers couldn't auto-play annoying tracks when you went to their websites.
When I was using audio/video tags, I was trying to build a rich media advertisement. So I hooked my audio/tracks loading to the banner click event, when you click a banner and expand the advertisement.
What I'd suggest you should do is have a small lightbox popup come up, asking the user if they want to turn on/off sound. You can attach your load functions to the click event of that popup box, regardless if the user turns the sound on or off.
Personally, I didn't have much luck using the load() function. I'd run that function to load the audio and then click play and it would just load it again. It could have always been that I just didn't do it right, so feel free to prove me wrong and get that working. What did is I told the track to play, so that way it would start loading, and then I'd use a setInterval to see if the current play time incremented just a few milliseconds. Once I noticed that it started to play the track, I'd immediately pause it.
3) Audio/Video tags are only supported in iOS 4.0 and higher
There's no trick to getting around this. Its just the facts.
Here's a few sites that helped when when I was developing with audio/video tags:
http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements
Good luck!