HTML5 audio element doen't work on mobile

Question

I have a sample with HTML5 element. I need dynamically create audio element after ajax request and play it. But it doesn't work on mobile! Android 4.1 and IOS7. It works perfect on desktop! It doesn't work after page load. But it works after press buttom and after press button play on control. Why?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function play() {
    var audio = document.createElement('audio');
    audio.autoplay = true;
    audio.controls = true;
    audio.src='http://s3.amazonaws.com/audiojs/02-juicy-r.mp3';
    document.body.appendChild(audio);

    audio.play();
}

setTimeout(play, 1000);

</script>
</head>

<body>

<h1>test</h1>

<input type='button' value='Press Me' onclick='play()' />

</body>
</html>

There are other accepted Responses here: http://stackoverflow.com/questions/12206631/html5-audio-cant-play-through-javascript-unless-triggered-manually-once http://stackoverflow.com/questions/10948081/playing-html5-audio-in-ajax-response-in-ios — Robbie Chiha, Feb 26 '14 at 01:49

score 0 · Answer 1 · answered Dec 09 '13 at 23:39

I had the same experience where audio wouldn't play after an AJAX call. I guess it has to do with security settings on mobile. Mobile browsers behave differently. The same happens when trying to call up the keyboard on mobile. It is only possible after a keypress or a click event but not automatically on page load or after an Ajax call.

One solution that I used might be to trigger the sound outside of the Ajax call, in the event that triggered the Ajax call in the first place.

HTML5 audio element doen't work on mobile

1 Answers1