I think I found a workaround for the audio not working. I can't really explain why this fix is working, but it is.
Here's what my old code looked like:
// Create the audio tag
var sprite = document.createElement('audio');
var id = document.createAttribute('id');
id.nodeValue = 'audio_sprite';
var src = document.createAttribute('src');
src.nodeValue = 'my-audio-sprite.mp3';
sprite.setAttributeNode( id );
sprite.setAttributeNode( src );
// Add it to the DOM
var body = document.getElementsByTagName('body')[0];
body.appendChild( sprite );
// Play/Pause to load the audio.
sprite.play();
sprite.pause();
Here's what I'm doing now.
// Grab an existing DOM element and create an audio tag.
var body = document.getElementById('hover');
body.innerHTML += '<audio id="audio_sprite"><p>Audio not supported</p></audio>';
// Apply the SRC to the audio tag.
// Q: Why don't we just do that in the step above?
// A: I'm not really sure why, but iOS8 doesn't like it. Sorry this is so ugly.
var sprite = document.getElementById( 'audio_sprite' );
sprite.src = 'my-audio-sprite.mp3';
// Once the metadata is loaded, call play/pause so we can play the audio later.
sprite.addEventListener('loadedmetadata', function() {
sprite.play();
sprite.pause();
});
In my mind, both should work however, in practice, only the second one does for iOS8. I hope this helps someone.
){kind=link}