问题描述
我使用这个简单的代码处理HTML5音频标记:
I am working with HTML5 audio tag with this simple code:
HTML
<audio id="audioFrenata">
<source src="sounds/frenata.ogg">
<source src="sounds/frenata.mp3"></audio>
JS
$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play();
使用Chrome按预期工作,Windows上的Safari 5.1.7和iPad 3上的Safari我收到这个:
with Chrome this works as expected, with Safari 5.1.7 on Windows and Safari on iPad 3 I receive this:
'undefined' is not a function (evaluating '$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play()')
任何人都知道为什么?
推荐答案
我遇到了完全相同的问题,我发现它是由于Safari中的以下限制:
I have had the exact same problem, and I found that it is due to the following restriction in Safari:
参考:
解决方法之一它是默认静音,当用户取消静音时,您可以创建HTML5音频对象的实例,并将其存储在静态/全局变量中,并将其用于进一步播放。
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.
- 更新
这是一篇描述问题以及如何处理问题的博文:
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
这是一个类似的stackoverflow问题,讨论相同的事情:
Here is a similar stackoverflow question discussing the same thing: Autoplay audio files on an iPad with HTML5
以下是我编写的用于处理HTML5中音频播放的JavaScript模块:
And here follows a JavaScript "module" I have written to use for handling playback of audio in HTML5:
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
};
})();
这篇关于Safari音频标签不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!