I'm trying to add a callback to a HTML5 audio element on an iPad.
I added an eventlistener to the element, the myOtherThing() starts but there is no sound. If I pause and the play the sound again the audio starts. This works in Chrome. Does anyone have an idea how I can do this?
myAudioElement.src = "path_to_file";
addEventListener("canplay", function(){
myAudioElement.play();
myOtherThing.start();
});
SOLVED
Just wanted to share my solution here, just in case someone else needs it. As far as I understand the iPad does not trigger any events without user interactions. So to be able to use "canply", "playing" and all the other events you need to use the built in media controller. Once you press play in that controller, the events gets triggered. After that you can use your custom interface.
You need to tell Safari to begin loading the file. Plus, the canplay event isn't supported on iOS. Just call play immediately after calling load.
myAudioElement.src = "path_to_file";
myAudioElement.load(); // Start loading the audio
myAudioElement.play();
Related
I have this in the window load listener function.
var audio = new Audio();
audio.src = "assets/silence.mp3";
audio.load();
document.getElementById("body").addEventListener(
'touchstart',
function(evt){ audio.play(); audio = 0; },
{capture:false,once:true,passive:true}
);
In chrome on android (with remote debugging open), I touch the screen and it (correctly) triggers trying to play the audio. However, it fails and logs this to the console:
(index):65 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
How else am I supposed to trigger audio in a way that ensures the user initiates it, if not through a user interaction event listener?
aha. turns out, touchstart doesn't count as a "user interaction" from the perspective of the mechanisms preventing auto-play.
solution: swap it with click.
one thing I'm still frustrated with:
I'm using this specific snippet as a means of very quickly allowing audio to be played on the page so that the underlying html5 game can play audio without worrying about it being blocked by the browser.
however- because it needs to wait for a full "click" event (as opposed to a "touchstart" event), any audio that should be triggered on "touchstart" is going to be passed over (for the first time it would otherwise be triggered).
it seems like 1. there's no way to get around this to use it how I'd like, and 2. if you're able to just listen to the whole document for a "click" anyways, it's not actually doing anything from stopping unwanted audio.
If anyone can come up with a better solution, I'll swap the "correct answer" to that.
I had the same problem when I was making a web piano. The browser charged the piano on load, so you could press(actually touch the screen) the piano keys before you click something. What I did was to add a starting screen with a button to start the game and this solved it because you had to click something before you touch the piano keys.
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code
var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});
It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer.
Thanks in advance
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.
You can't unless there has been user interaction.
Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.
setInterval('playSound()',2000);
function playSound(){
var sound=new Audio('song.mp3');
sound.play();
}
This work in chrome but not work in ipad app.
You cannot trigger play on audio or video elements programatically on iOS.
I once wrote a blogpost about it.
Sad, but true. Apple deliberately decided that a touch event is mandatory to load and play audio. There is no workaround for this.
There are three methods to circumvent this (at least somehow) all described in the post:
Bind touchstart event to body
Hot swapping sources
Use audio sprites
Of course you could also use PhoneGap/Cordova to wrap your App. There is a setting in the Cordova.plist called 'MediaPlaybackRequiresUserAction'. Just set it to 'NO'.
I want to execute a JavaScript function every second, or whenever the time position changes on a Mobile Safari video player during playback.
Is there an event listener or some way of achieving this? I see how to do it on-demand here:
In Safari for iPad, how can I get the current video position via Javascript?
However, I'm looking for a way to fire the function automatically instead of requiring user interaction to trigger getting the position. Can this be done?
There's a ton of events you can hook into with HTML5 video. Not all will be supported by every browser, but Mobile Safari should do a pretty good job with what you need for this, which is the "timeupdate" event.
video.addEventListener('timeupdate', function() {
console.log('video time: ' + video.currentTime);
});
You can see a demonstrator for the events here:
http://www.w3.org/2010/05/video/mediaevents.html
I've been evaluating HTML5 audio on iOS 4 and have been trying to understand its limitations. From what I can tell...
It is possible to play audio in the background
It is not possible to fire JavaScript events in the background upon track completion
It is possible to fire JavaScript events while the screen is off, but Safari must be in the foreground (before turning the screen off)
My goal for this current project is to create a dynamic playlist that will continue to fire events and move to the next track even while Safari is not in the foreground. Is this possible with the current way HTML5 audio works on iOS?
I am curious about how the chaining of JavaScript events works on iOS if anyone has additional information. It seems that you are allowed to queue back to back sounds, but it must happen shortly after a "human" function happens (for example, tapping an element). Anything else that tries to queue a sound outside of this human function is denied the ability to play.
Also...
Is it even possible to have events that fire to move a real iOS application to the next track? It seems as if the application is only allowed to finish its current audio stream and then it goes into an idle state. Just trying to figure out all the angles here!
This is quite an old question, so I'm not sure if you've found an answer already or not.
One thing I know is that an audio clip cannot be played via JavaScript on mobile Safari.
Autoplay audio files on an iPad with HTML5
The only way to make audio play, is through a click event. This wasn't the case on 3.x, but on 4.x it is. This is because Apple doesn't want the webapp to download audio on a 3g connection programmatically, so they force the user to initiate it.
I would think that if all of the tracks were started downloading (cached), then it may be possible. I would try forcing the user to start one track, and at the same time call .load() on all of the other tracks (in the same click handler). This will force the iOS device to start downloading the audio tracks, and you may be able to play the next track (not sure though).