HTML5 音频对象无法在 Safari 中播放答案

【问题标题】：HTML5 Audio object doesn't play in SafariHTML5 音频对象无法在 Safari 中播放
【发布时间】：2011-05-03 14:56:42
【问题描述】：

在my page 上，我在 JavaScript 中动态创建了一个 HTML5 音频元素：

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

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

bell.play();

结果：

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

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

【问题讨论】：

能确认直接打开mp3文件播放吗？只是为了确保
Pekka：是的，它可以在 Chrome、OmniWeb 和 Finder 中快速查看。
音频标签的行为在不同版本的移动 safari 上是不同的。在 3.1/3.2 设备上，您可以使用假点击方法，在 iOS 上大于此和小于 4.2.1。你必须先加载（bell.load（））然后播放（bell.play（））。从 4.2.1 开始，除非由用户交互触发，否则您无法自动播放 HTML5 音频/视频。

标签： javascript html audio ios webkit

【解决方案1】：

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

【讨论】：

或非链接对象的“tap”事件
在最新版本的 iOS 6.0.x 上，即使在用户点击事件中也无法再次工作！！！！！！！！！

【解决方案2】：

“我将如何解决此问题？”的好问题。这是我的进攻计划……

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

【讨论】：

我刚刚在 Safari for Mac 中再次尝试了原始页面，现在它可以工作了。呸呸呸。不过，我会尝试您的其他建议。

【解决方案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.

【讨论】：

【解决方案4】：

使用

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

bell.play()

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

【讨论】：