html5 <audio> 无法在 IOS Safari 上播放

Question

我有一个 mp3，它可以通过旧浏览器中的 embed 标签正确播放，但对于 iPad，当我尝试通过 <audio> 播放相同的 mp3 时，它显示不支持电影。这是 MIME 类型的问题吗？此方法适用于桌面 Safari。

如何让它在IOS4.3下的Safari上播放？

这是我的代码：

var audio = document.createElement('audio');  
audio.type = "audio/mpeg";     
audio.src = audioUrl;              
x.appendChild(audio);     
audio.load(); 
audio.play(); 

Answer 1

大家好消息

我在某处读到，一旦您在用户交互中播放过一次声音， 然后，您无需进一步交互即可再次播放。

所以将音量设置为零并在开始时一次性播放所有加载的声音。

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

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

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 2

请注意，如果您通过 https 提供内容，您需要有一个有效的证书，否则它将无法在 iOS 设备（或 Mac 上的 Safari）上播放。您不会收到 SSL 错误或任何明显的 SSL 相关消息 - 它只是不适用于 iOS 设备和 Mac 版 Safari，但适用于 Mac 上的 Chrome 和 Firefox（例如）。

请参阅here 了解 SSL 是问题的相关问题（对我而言）。

Answer 3

我必须在kinakuta的答案中添加一些内容

我尝试了评论中的链接到答案apples html5 showcase 如果您将 Opera 屏蔽为 firefox，则音乐可以在 Firefox 16、Internet Explorer 9、Google Chrome 22 和 Opera 上播放。

但 Apples OWN 演示不适用于我的机器上的 Apple Safari 5.1.7，因为我的机器上没有 Quicktime。 HTML5 音频不能很好地与 Safari 配合使用，还有其他一些问题。 如果不想在计算机上安装 quicktime，这在开发过程中可能会很烦人。

Answer 4

问题是负载必须发生在用户触发的事件（按钮单击等）中。我不确定这是哪个 iOS 版本，但我在 4.3.5 中确认了它。我在这里写了更多细节和可能的解决方法：

Autoplay audio files on an iPad with HTML5

编辑：苹果的解释： http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

所以问题是 iOS 4+

Answer 5

从 4.x 开始，iOS 不再支持 html5 音频对象的自动播放。 见：Autoplay audio files on an iPad with HTML5

edit (2011-10-04)：这是关于原始海报代码 sn-p 的呈现方式。如果给定的代码不是通过用户操作（f.ex click）触发的事件执行的，音频将不会播放。如果您在绑定到某个按钮上的单击事件的函数中包含此代码，它应该可以工作（尚未测试）。