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

Question

在我的页面上，我使用JavaScript动态创建HTML5音频元素：

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

稍后（响应jQuery倒计时对象过期），我会播放它：

bell.play();

结果：

• Mac上的Chrome (6.0.472.55)：音频播放正常。
• OmniWeb (5.10.2)：音频播放正常。
• Mac上的Safari (5.0.1)：我听不到任何声音。 音频播放正常。（我不知道为什么之前不能播放。）
• MobileSafari (iOS 3.1.3 - 我的设备的最新版本)：我听不到任何声音。

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

- Peter Hosey

---

您能确认直接打开MP3文件可以播放它吗？只是为了确保。 - Pekka

Pekka：是的，它可以在Chrome、OmniWeb中播放，并且可以在Finder中使用Quick Look。 - Peter Hosey

音频标签在不同版本的移动Safari上的行为是不同的。在3.1 / 3.2设备上，您可以使用虚拟点击方法，在大于此版本但小于4.2.1的iOS上，您必须先加载（bell.load（）），然后播放（bell.play（））。从4.2.1开始，除非由用户交互触发，否则无法自动播放HTML5音频/视频。 - bhups

Answer 1

关于iPhone Safari: 当通过onclick事件启动时，play()函数似乎能够正常工作。 详情请见：http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en。

- Remi Grumeau

---

如果是非链接对象，则返回“tap”事件。 - Martin

在最新版本的iOS 6.0.x上，即使在用户点击事件中，它也再次无法工作！！！！！ - Peter Lee

Answer 2

“如何进行故障排除？”这是一个好问题。以下是我的解决方案：

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

- Domenic

---

我刚刚在Mac上的Safari浏览器中再次尝试了原始页面，现在它可以工作了。真是太好了。不过我会尝试你提出的其他建议。 - Peter Hosey

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.

- Roy Fagon

Answer 4

使用

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

bell.play()

最好在页面加载时使用new Audio()和load()，并在某个函数调用中使用play()播放它。 因为load()需要一些时间。所以最好在页面加载时加载音频以减少延迟。 希望它能起作用。 :)

- Sourav Purkait

---

对我有用，非常感谢。在尝试了许多不同的方法后，终于找到了这个。 - viCky