本文介绍了Safari音频标签不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用这个简单的代码处理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音频标签不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 22:15
查看更多