网页上的音频中断

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 移动设备的错误，而不是我们可以控制的。

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

Answer 2

您尝试过使用 HTML5 音频元素吗？只需将其添加为出现在 Canvas 上方的元素即可。我添加了一个音频元素“”，它似乎在我的 iPad

中运行良好

网页上的音频中断

Audio cuts out on webpages

safari

google-chrome

ios

soundjs