16

我正在使用以下简单代码处理 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()')

任何人都知道为什么？

4

5 回答 5

17

我遇到了完全相同的问题，我发现这是由于 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
    };
})();
于 2012-10-09T16:42:35.657 回答
2

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

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

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

于 2017-10-16T15:00:10.717 回答
1

我有同样的问题，我通过把type="audio/mpeg"before解决了type="audio/ogg"。

<audio controls>
  <source src="your-sound-url" type="audio/mpeg"></source>
  <source src="your-sound-url" type="audio/ogg"></source>
</audio>
于 2021-08-25T06:13:59.417 回答
0

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

于 2012-10-09T16:12:59.087 回答
-1

身份证好像错了。

$('#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>​

参考现场演示

于 2012-10-09T16:15:53.610 回答