I am working on a website which gives users the option to have the pages read aloud to them.
I am using SoundJS (https://www.createjs.com/soundjs) to load in an OGG, MP3, and WAV version of a narration file, and then play it as soon as it finishes loading. Here is the code:
var narration = {
path: '../assets/sounds/',
manifest: [
{
id: 'narration',
src: {
mp3: 'narration.mp3',
ogg: 'narration.ogg',
wav: 'narration.wav'
}
}
]
};
createjs.Sound.alternateExtensions = ['mp3', 'wav'];
createjs.Sound.registerSounds(narration);
createjs.Sound.addEventListener('fileload', function(){
createjs.Sound.play('narration');
});
On the iPhone X and iPad, in Safari and Chrome, the audio file starts playing, but then cuts out before it finishes. The audio files on the site range from 7 to over 30 seconds, and the audio always cuts out a few seconds before the end. For instance, in Chrome, a 10 second clip stops playing after 8 seconds, and a 31 second clip stops playing after 29. In Safari, the same 10 second clip stops after 7 seconds, and the same 31 second clip stops after 22.
On all non-iOS devices we've tested, in many different browsers, this issue has never occurred.
What is the reason behind this, and what can I do to ensure the audio plays all the way through?
As long as there is no solution found for this issue, we're considering it a bug with iOS mobile devices, and not something we can control.
As a workaround, we've implemented a button on each page that the user must click before the audio plays. The button runs createjs.Sound.play('narration'), rather than it being triggered through the fileload event listener. For some reason, registering a click on each page before attempting to play audio allows it to play all the way through, reliably.