Autoplay audio on mobile safari
There is no chance to get autoplay working in mobile browsers. Android and iOS doesn't allow it and personally I think that is a feasible confinement! Imagine every second website you will open plays and ugly sound at start!
But you can make a little hack, so that the user will not remark that he currently started the audio for your application:
You WILL need an user interaction to start your audio. So, your app or game maybe has a startscreen or a welcome button which needs a click to get to mainmenu or start the game. Bind to an user event (the accepted events are: "click", "touchend", "doubleclick" and "keydown") and call the load() method for your
<audio>
.Bind to the "canplaythrough" event of the
<audio>
. This event is triggered when your source is ready to play. Here you can now call play(), pause() or wait for other interactions. So the audio is ready but now you have full controll when to start or stop the sound.I also advise you to use audio sprites on mobile clients. iOS (and Android?) internally implemented audio support through a Singleton. That means that you cannot, like in desktop browser, have 10 audio elements and play differents sound at once. You can only play one file!
So changing the source for different sounds takes to much time. With an audio sprite you can start your sprites when the user first interact with your website or game. Pause your sprite and when you need to play sound you have to set the currentTime to the beginning of the sprite and pause the sprite when currentTime of your file reaches the end of your sprite. There is an timeupdate Event where your can check the currentTime of your sprite.
If you are more interested I can prepare my javascript audio sprites player for you!!
Why can't JavaScript .play() audio files on iPhone safari?
iOS disables autoplay, instead requiring that play be initiated as part of a user interaction (e.g., you can start playback within a touchstart listener). There's a bit of documentation about this on Apple's developer documentation. There's also this article Overcoming iOS HTML5 audio limitations on IBM's developer site that has examples and more detail.
Autoplay audio files on an iPad with HTML5
UPDATE: This is a hack and it's not working anymore on IOS 4.X and above. This one worked on IOS 3.2.X.
It's not true. Apple doesn't want to autoplay video and audio on IPad because of the high amout of traffic you can use on mobile networks. I wouldn't use autoplay for online content. For Offline HTML sites it's a great feature and thats what I've used it for.
Here is a "javascript fake click" solution: http://www.roblaplaca.com/examples/html5AutoPlay/
Copy & Pasted Code from the site:
<script type="text/javascript">
function fakeClick(fn) {
var $a = $('<a href="#" id="fakeClick"></a>');
$a.bind("click", function(e) {
e.preventDefault();
fn();
});
$("body").append($a);
var evt,
el = $("#fakeClick").get(0);
if (document.createEvent) {
evt = document.createEvent("MouseEvents");
if (evt.initMouseEvent) {
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
}
$(el).remove();
}
$(function() {
var video = $("#someVideo").get(0);
fakeClick(function() {
video.play();
});
});
</script>
This is not my source. I've found this some time ago and tested the code on an IPad and IPhone with IOS 3.2.X.
Autoplay an Audio File on Mobile Safari
I guess that it's impossible, in fact, I hope so. Not for you, I'm sure that you'll use it for a good purpose, but I really don't want allow sites to auto-play audio files.
Oh, I remember something... It's possible with Flash!
How can a user enable audio auto play in iOS Safari, so that Amazon Polly text to speech will work as expected?
The solution is to make sure to play all audio through one single instance. When the user first enters the site, use one of their initial clicks to play blank audio through this instance to "prime" it
Related Topics
Add Spacing Between Vertically Stacked Columns in Bootstrap 4
HTML - Two Tables Horizontally Side by Side
Can You Have a <Span> Within a <Span>
HTML Embed Autoplay="False", But Still Plays Automatically
How to Create a Triangle in CSS3 Using Border-Radius
How to Show Three Columns Per Row
What Is The Correct Use of Schema.Org Sitenavigationelement
How to Change The Style of a <Select>'s <Optgroup> Label
Set Div to Have Its Siblings Width
How to Show an Animation That Is Hidden Behind a Colored Div Using a "Reveal" Div on The Surface
Items That Span All Columns/Rows Using CSS Grid Layout
Safari Anchors on Links Not Working
Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
Alignment of Content Vertically in Adjacent Flexbox Containers