Javascript 带有音频标签的 Safari 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12804028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari with audio tag not working
提问by Matteo Ciman
I am working with HTML5 audio tag with this simple code:
我正在使用这个简单的代码处理 HTML5 音频标签：
HTML
HTML
<audio id="audioFrenata">
<source src="sounds/frenata.ogg">
<source src="sounds/frenata.mp3"></audio>
JS
JS
$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play();
with Chrome this works as expected, with Safari 5.1.7 on Windows and Safari on iPad 3 I receive this:
使用 Chrome 这按预期工作，使用 Windows 上的 Safari 5.1.7 和 iPad 3 上的 Safari 我收到这个：
'undefined' is not a function (evaluating '$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play()')
Anyone has an idea of why?
任何人都知道为什么？
回答by Lasse Christiansen
I have had the exact same problem, and I found that it is due to the following restriction in Safari:
我遇到了完全相同的问题，我发现这是由于 Safari 中的以下限制：
In Safari on iOS (for all devices, including iPad), where the user may beon a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能使用蜂窝网络并按数据单位收费，预加载和自动播放被禁用。在用户启动之前不会加载任何数据。这意味着 JavaScript play() 和 load() 方法在用户启动播放之前也处于非活动状态，除非 play() 或 load() 方法由用户操作触发。换句话说，用户启动的播放按钮有效，但 onLoad="play()" 事件无效。
参考：http: //developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
One way to solve it, is to mute audio by default, and when the user "un-mutes" you can create the instance of an HTML5 Audio object and store that in a "static" / "global" variabel and use that for further playback.
解决它的一种方法是默认静音音频，当用户“取消静音”时，您可以创建 HTML5 音频对象的实例并将其存储在“静态”/“全局”变量中，并进一步使用它回放。
-- UPDATE
- 更新
Here is a blogpost describing the issue and how to deal with it: http://blog.gopherwoodstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html
这是一篇描述该问题以及如何处理它的博客文章：http: //blog.gopherwoodstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html
Here is a similar stackoverflow question discussing the same thing: Autoplay audio files on an iPad with HTML5
这是讨论同一件事的类似 stackoverflow 问题：Autoplay audio files on an iPad with HTML5
And here follows a JavaScript "module" I have written to use for handling playback of audio in HTML5:
下面是我编写的用于处理 HTML5 中音频播放的 JavaScript“模块”：
NS.modules.html5.audio = (function () {
var _snd = false;
function playAudio(src) {
if (!_snd)
_snd = new Audio();
else
$(_snd).empty();
for (var i = 0; i < src.length; i++) {
var source = document.createElement('source');
source.type = src[i].type;
source.src = src[i].src;
_snd.appendChild(source);
}
_snd.load(); // Needed on safari / idevice
_snd.play();
};
var playAudio = function () {
var src = [
{ src: "/path/to/audio.wav", type: "audio/vnd.wave" },
{ src: "/path/to/audio.ogg", type: "application/ogg; codecs=vorbis" },
{ src: "/path/to/audio.mp3", type: "audio/mpeg" }
];
playAudio(src);
};
return {
playAudio: playAudio,
// more play functions here
};
})();
回答by George Dimitriadis
In my case the problem was caused due to HTML format, I switched to the following format and it worked. Hope this helps somebody :
在我的情况下，问题是由 HTML 格式引起的，我切换到以下格式并且它起作用了。希望这有助于某人：
<audio id="audioFrenata" src="sounds/frenata.ogg"></audio>
Note the lack of <source>element in the above layout.
请注意<source>上述布局中缺少元素。
回答by Abubakkar
回答by Siva Charan
ID seems to be wrong.
身好像有误。
$('#audioLevel').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play();
It suppose to be
应该是
$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play();
Use below HTML
使用下面的 HTML
<audio id="audioFrenata" controls="controls">
<source src="sounds/frenata.ogg" type="audio/ogg">
<source src="sounds/frenata.mp3" type="audio/mpeg">
</audio>?
Refer LIVE DEMO
参考现场演示
