网页上的音频被截断

Posted 2023-02-23

【中文标题】网页上的音频被截断

【英文标题】：Audio cuts out on webpages

【发布时间】：2020-02-04 21:16:54

【问题描述】：

我正在开发一个网站，让用户可以选择让他们大声朗读页面。

我正在使用 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 设备上，在许多不同的浏览器中，这个问题从未发生过。

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

【问题讨论】：

有解决这个问题的办法吗？我也面临类似的问题，在 iOS 13 中出现问题。

您可以尝试手动设置duration 看看它是否可以正常播放剪辑吗？

@CodingSomething 我相信 SoundJS 对象的持续时间属性是只读的。

【参考方案1】：

只要没有找到解决此问题的方法，我们就会将其视为 iOS 移动设备的错误，而不是我们可以控制的问题。

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

【参考方案2】：

您是否尝试过使用 html5 音频元素？只需将其添加为出现在画布上的元素。我添加了一个音频元素“”，它似乎在我的 iPad 上运行良好