网页上的音频剪辑

Question

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?

Answer 1

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.

Answer 2

Have you tried using the HTML5 audio element? Simply add it as an element that appears over the Canvas. I added an audio element, "", and it seems to work well in my iPad