網頁上的音頻被截斷 (Audio cuts out on webpages)

問題描述

網頁上的音頻被截斷 (Audio cuts out on webpages)

我正在開發一個網站，讓用戶可以選擇讓他們大聲朗讀頁面。

我正在使用 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 秒後停止，

參考解法

方法 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.

方法 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

(by SpyderScript、SpyderScript、Luci )

參考文件

1. Audio cuts out on webpages (CC BY‑SA 2.5/3.0/4.0)