HTML5 Audio 对象无法在 Safari 中播放

Question

在我的页面上，我用 JavaScript 动态创建了一个 HTML5 Audio 元素：

bell = new Audio("alarmclock.mp3");

稍后（响应 jQuery Countdown 对象过期），我播放它：

bell.play();

结果：

• Mac 版 Chrome (6.0.472.55)：音频播放正常。
• OmniWeb (5.10.2)：音频播放正常。
• Mac 版 Safari (5.0.1)： 我什么也听不到。 音频播放正常。 （我不知道为什么它没有更早地工作。）
• MobileSafari（iOS 3.1.3——我设备的最新版本）：我什么也没听到。

我将如何解决这个问题？ 我真的很想让它在 MobileSafari 中工作，这样我的网络应用程序就可以移植了。

Answer 1

关于 iPhone Safari：似乎 play() 在由 onclick 事件启动时起作用。 请参阅http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en

Answer 2

“我将如何解决这个问题？”的好问题。 这将是我的攻击计划......

• 在 Mac 上使用 Safari 进行调试； 如果你让它在那里工作，然后用 MobileSafari 测试，因为后者更痛苦。
• 从空白页重新开始。 使用此 MP3 文件静态插入 HTML5 音频元素（不是通过 JavaScript）。
• 继续使用您的最小页面。 使用 jQuery 的$(document).ready(function () { /* ... */ })在页面加载时加载音频。 它仍然有效吗？
• 好的，现在尝试将倒计时逻辑添加到演示页面——尽可能少。 这是否导致了问题？
• 如果您已经达到了这一点并且它仍在您的演示页面上工作，那么您知道这将涉及您网站上所有其他复杂的事情，而不是音频甚至动态加载的音频的问题。 在这种情况下，祝你好运:-S。 要么将内容添加到您的空白页面，每次进行测试，要么从您的原始页面中暂时删除它们，直到它起作用为止。 然后你就会知道是什么导致了这个问题。

Answer 3

大家好消息

我在某处读到，一旦您在用户交互（例如触摸或点击）中播放了一次声音，您就可以从代码中动态播放它。

因此，将音量设置为零并一次性播放所有加载的声音。

我在“touchstart”上有一个监听器，它有一个实例化的函数，一旦用户触摸屏幕，它就会播放所有的声音。

这是我在 REACT didMount() 中的做法

componentDidMount() 
{
    
    let that = this;
    document.body.addEventListener('touchstart', function(evt) //First touch event on the screen will trigger this
        { 
            console.log("Audio Setup for iOS:", that.state.allow_sound);
            if(!that.state.allow_sound) //False on initial load
            {
                var Audio1 = document.getElementById("ping");
                Audio1.load();  
                Audio1.volume = 0;
                Audio1.play();          
                
                var Audio2 = document.getElementById("boom");
                Audio2.load();  
                Audio2.volume = 0;
                Audio2.play();  
                        
                var Audio3 = document.getElementById("splash");
                Audio3.load();  
                Audio3.volume = 0;
                Audio3.play();          
                
                var Audio4 = document.getElementById("hit");
                Audio4.load();  
                Audio4.volume = 0;
                Audio4.play();                          

                that.setState({allow_sound : true})
            }
    });
}

Then you can call these sounds dynamically from within the code.

Answer 4

使用

bell = new Audio("alarmclock.mp3");
/*** The magical line ***/
bell.load()

bell.play()

最好在页面加载时使用 new Audio() 和 load() 并在某些函数调用中使用 play() 它。 因为 load() 需要一些时间。 所以最好在页面加载时加载（）音频以减少延迟。 希望它有效。 :)