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

それを解決する 1 つの方法は、デフォルトで音声をミュートすることです。ユーザーが「ミュートを解除」すると、HTML5 Audio オブジェクトのインスタンスを作成し、それを「静的」/「グローバル」バリアベルに保存して、さらに使用することができます。再生。

- アップデート

この問題とその対処方法を説明するブログ投稿は次のとおりです。

これは、同じことを議論する同様のスタックオーバーフローの質問です: Autoplay audio files on an iPad with HTML5

そして、HTML5 でオーディオの再生を処理するために使用するために作成した JavaScript "モジュール" を以下に示します。

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 に答える
0

必要な HTML5 機能が、言及したブラウザーでサポートされているかどうかを確認してください。ここで確認できます。これがあなたを助けることを願っています。

于 2012-10-09T16:12:59.087 に答える
-1

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>​

ライブデモを参照

于 2012-10-09T16:15:53.610 に答える