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
Related
I am using Ionic 3 to build a hybrid app.
I have both video and audio file saved in phone local storage.
The video is played in html5 video element.
The audio can be played either in html5 audio element or Ionic Native Media plugin.
I want to:
mute the video (works)
play video and audio at the same time (not working).
It seems that the system does not allow two media resources to run at the same time.
Any suggestions?
Thanks,
D
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've been trying to encode a video trailer for mobile Safari playback (iPhone). Using Handbrake for Windows, I selected the source .mov file and chose the iPhone 4 preset. I then checked off the Web optimized option and started the process.
The resulting video did not play on my iPhone's Safari browser, however.
http://mobilevideo.jt.citeeze.com/static/trailer.m4v
If anyone has had success encoding mobile safari video with ffmpeg, could you provide the exact parameters?
Thanks!
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.
I built an offline Web app (at www.chirp.com) that caches itself when bookmarked on the desktop. Testing on the iPhone4 in airplane mode shows that the program runs without a network connection (except for Google map access of course). But the mp3 sound files do not play in this mode. Is there a problem with the audio tag when running in offline mode? The sound files are included in the manifest file, so they should be cached with the other files. Image files are still shown for instance.
How about if I use PhoneGap to create an iPhone app from this webapp? Will the sound files be included in the resulting binary load? In other words will the time delay, of online download of the small mp3 files each time the app is run and the sound is requested, be removed?
It is a bug or design decision on iOS to silently disallow caching of audio resources.
See this answer for more detail.
Using PhoneGap should work because the audio files will be present locally.
How about if I use PhoneGap to create an iPhone app from this webapp? Will the sound files be included in the resulting binary load? In other words will the time delay, of online download of the small mp3 files each time the app is run and the sound is requested, be removed?