带有音频标签的 Safari 无法正常工作答案

【问题标题】：Safari with audio tag not working带有音频标签的 Safari 无法正常工作
【发布时间】：2012-09-30 00:29:11
【问题描述】：

我正在使用这个简单的代码处理 HTML5 音频标签：

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 我收到了这个：

'undefined' is not a function (evaluating '$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play()')

有人知道为什么吗？

【问题讨论】：

认为undefined 指的是stop()，因为停止不是您的DOMNode #audioLevel 上的功能。 (document.getElementById("audioLevel").stop === undefined)
在哪里停止？？你指的是“结束”事件，即使我消除它并只尝试调用播放它也会给出同样的错误..
@Matteo，你找到这个问题的解决方案了吗？
还没有..我还在努力..

标签： javascript jquery safari html5-audio

【解决方案1】：

检查您提到的浏览器是否支持您想要的 HTML5 功能。您可以查看here。希望这会对你有所帮助。

【讨论】：

【解决方案2】：

ID 好像有误。

$('#audioLevel').on('ended', function() {
     manageImageObjectsLevel();
}).get(0).play();

应该是这样的

$('#audioFrenata').on('ended', function() {
     manageImageObjectsLevel();
}).get(0).play();

在 HTML 下面使用

<audio id="audioFrenata"  controls="controls">
    <source src="sounds/frenata.ogg" type="audio/ogg">
    <source src="sounds/frenata.mp3" type="audio/mpeg">
</audio>

参考LIVE DEMO

【讨论】：

这解决了问题的第一个问题（错误的 ID）-但是，这不会使 iPad 在访问 jsFiddle 时自动播放音频-请参阅我的帖子以进行澄清（我已交叉检查iPad 确保在调用 .play() 时不会自动播放 - 正如我在帖子中提到的，用户必须启动播放；）
这仍然无法在 .ogg 格式的 Safari 上运行：jsfiddle.net/q8fze1L3

【解决方案3】：

我也遇到过同样的问题，我发现是因为 Safari 中的以下限制：

在 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

解决它的一种方法是默认静音，当用户“取消静音”时，您可以创建 HTML5 音频对象的实例并将其存储在“静态”/“全局”变量中并使用以便进一步播放。

-- 更新

这里有一篇博文描述了这个问题以及如何处理它：http://blog.gopherwoodstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html

这是一个类似的 stackoverflow 问题，讨论同一件事：Autoplay audio files on an iPad with HTML5

下面是我编写的一个 JavaScript“模块”，用于处理 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
    };
})();

【讨论】：

哇！不错，是的，移动浏览器不会自动下载/播放音频文件。对于我制作的节拍器应用程序，我必须从关闭声音开始，当用户单击/按下声音图标（我必须最初禁用）时，它才会加载和播放！

【解决方案4】：

在我的情况下，问题是由于 HTML 格式引起的，我切换到以下格式并且它有效。希望这可以帮助某人：

<audio id="audioFrenata" src="sounds/frenata.ogg"></audio>

请注意上述布局中缺少<source> 元素。

【讨论】：

这对我有用，在 Firefox、Chrome 和 Safari 中（还没有测试过）。不过我觉得很奇怪，这不是我见过的格式。
这不适用于 .ogg 格式的 Safari。 jsfiddle.net/q8fze1L3

【解决方案5】：

我遇到了同样的问题，我通过将type="audio/mpeg" 放在type="audio/ogg" 之前解决了它。

<audio controls>
  <source src="your-sound-url" type="audio/mpeg"></source>
  <source src="your-sound-url" type="audio/ogg"></source>
</audio>

【讨论】：