网页上的音频切断

Question

我正在致力于一个网站，让用户可以选择大声朗读网页给他们。

我使用SoundJS (https://www.createjs.com/soundjs)加载一个OGG、MP3和WAV版本的旁白文件，然后在加载完成后立即播放它。以下是代码：

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');
});

在iPhone X和iPad上，在Safari和Chrome中，音频文件开始播放，但在完成之前就被切断了。该网站上的音频文件范围从7秒到30秒以上，并且音频总是在结束前几秒钟被删除。例如，在Chrome中，10秒的剪辑在8秒后停止播放，31秒的剪辑在29秒后停止播放。在Safari中，相同的10秒剪辑在7秒后停止，而相同的31秒剪辑在22秒后停止。

在我们测试过的所有非iOS设备上，在许多不同的浏览器中，这个问题从未发生过。

这背后的原因是什么，我能做些什么来确保音频一直播放下去？

Answer 1

只要没有找到解决这个问题的办法，我们就认为它是iOS移动设备的一个bug，而不是我们可以控制的东西。

作为解决办法，我们已经在每个页面上实现了一个按钮，用户在播放音频之前必须单击该按钮。该按钮运行createjs.Sound.play('narration')，而不是通过fileload事件侦听器触发它。由于某种原因，在尝试播放音频之前，在每个页面上注册一次单击，就可以让它始终可靠地播放。

Answer 2

您试过使用HTML5音频元素吗？只需将其添加为显示在画布上的元素即可。我添加了一个音频元素""，它在我的iPad中似乎运行得很好