Safari音频标签不起作用 [英] Safari with audio tag not working

问题描述

我使用这个简单的代码处理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:

在iOS上的Safari（适用于所有设备，包括iPad），用户所在蜂窝网络上的 可能 ，并按数据单元收费， 预加载和自动播放已停用 。 在用户启动之前不会加载任何数据。 这意味着JavaScript play（）和load（）方法在用户启动播放之前也处于非活动状态，除非播放（）或load（）方法由用户操作触发。换句话说，用户启动的播放按钮有效，但onLoad =play（）事件不起作用。

In Safari on iOS (for all devices, including iPad), where the user may be on 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.

参考： http：// developer .apple.com / library / safari /＃documentation / AudioVideo / Conceptual / Using_HTML5_Audio_Video / Device-SpecificConsiderations / Device-SpecificConsiderations.html

解决方法之一它是默认静音，当用户取消静音时，您可以创建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.

- 更新

这是一篇描述问题以及如何处理问题的博文： http：//blog.gopherwo odstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html

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问题，讨论相同的事情：使用HTML5在iPad上自动播放音频文件

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音频标签不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！