I have developed a simple HTML 5 web app using the Web Audio API. The page is saved as a Web Clip and the apple-mobile-web-app-capable meta tag is added to enable full-screen. Everything thing works fine in Safari, the sound plays as intended. However, if the Home button is pressed and the app is sent to the Background state and then resumed, the Home button becomes unresponsive and the only method for fixing the issue is to do a hard reset.
Here is my code:
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<script>
var context;
var buffer;
function init() {
if ('webkitAudioContext' in window) {
context = new webkitAudioContext();
var request = new XMLHttpRequest();
request.open('GET', 'sounds/sound.mp3', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', function () {
var request = event.target;
buffer = context.createBuffer(request.response, false);
}, false);
request.send();
}
}
function play() {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
}
</script>
</head>
<body onload="init()">
<button onclick="play()">Play</button>
</body>
