Question

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

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：当onclick事件启动时，似乎play（）工作。见http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en

Answer 2

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

在Mac上使用Safari进行调试;如果你在那里工作，那么用MobileSafari进行测试，因为后者更加痛苦。
从空白页面重新开始。静态插入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()

最好在页面加载时使用新的Audio（）和load（），并在某些函数调用中对其进行播放（）。因为load（）需要一些时间。因此最好在页面加载时load（）音频以减少延迟。希望它能工作。：）

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

4 个答案: