2

私は、この HTML5 と JavaScript を使用したオーディオに非常に腹を立てています。すでに HTML にあるときは問題なく動作しましたが、JavaScript に移動したため、動作しません。サイズをできるだけ小さくしたいので、jQueryを使用したくありません。すべての関数が存在し、変数についても同じことが言えます。Chrome でエラーが発生することはありませんが、ネットワーク内の Chrome 開発者ツールには次のように表示されます。保留中。だから私はそれがすべてのデータを取得することを知っていますが、何も返さないだけです。no load またはoncanplayを返します。

Chrome で間違っている可能性があることやバグの可能性があることについて誰かにアドバイスしてもらえますか。

function loadAudio(loc,after){
        window.itemsToLoad++;
        var aud = new Audio(loc);
        if(typeof(after)=="function"){
            aud.addEventListener('load', function () {updateLoaders();alert('Yes');after(aud);}, false);
        }else{
            aud.addEventListener('load', function () {alert('Yes');updateLoaders();},false);
        }
        aud.preload="none";
        aud.addEventListener('onerror', function () {alert('Error');updateErrorLoaders();},false);
        aud.addEventListener('onabort', function () {alert('abort');updateErrorLoaders();},false);
        aud.addEventListener('onemptied', function () {alert('empty');updateErrorLoaders();},false);
        aud.type="type=\"audio/ogg\"";
        aud.controls="controls";
        aud.load();
        return aud;
    }
window.imageBackground = loadImage('images/background2.png',function (img) { alert("Yes it bloody works ;)");});
4

1 に答える 1

2

あなたのコードにいくつか問題があることに気付きました。まず、loadAudio関数を定義しますが、実際には を呼び出していますloadImage('images/background2.png', fn)。これは、コードをコピーして貼り付けたときの単なる手違いだと思います。次に、要素は属性<audio>をサポートしていません。typeメディア タイプを指定する場合は、子<source>要素を使用します。最後に、間違ったイベントをリッスンしています。オーディオ要素はイベントに応答せずonload、代わりにイベントを使用しonloadeddataます。オーディオの再生が終了したときに呼び出されるコールバックをサポートするための更新と小さな拡張機能を含むコードを次に示します。

function updateLoaders() {
    // do stuff
}

function updateErrorLoaders() {
    // do stuff
}

function loadAudio(src, loadComplete, playComplete) {
    window.itemsToLoad++;
    var audio = new Audio();

    // Playback has completed.
    audio.addEventListener('ended', function () {
        if (typeof playComplete === 'function') {
            playComplete(audio);
        }
    }, false);
    // The entire song has loaded (not necessarily done playing).
    audio.addEventListener('loadeddata', function () {
        updateLoaders();

        if (typeof loadComplete === 'function') {
            loadComplete(audio);
        }
    }, false);

    // Handle errors.
    audio.addEventListener('error', function () {
        console.log('error');
        updateErrorLoaders();
    }, false);
    audio.addEventListener('abort', function () {
        console.log('abort');
        updateErrorLoaders();
    }, false);
    audio.addEventListener('emptied', function () {
        console.log('empty');
        updateErrorLoaders();
    }, false);

    audio.preload = 'none';
    audio.src = src;
    audio.controls = 'controls';
    audio.load();

    return audio;
}

var audio = loadAudio('Example.ogg', function (audio) {
    console.log('audio completely loaded');
    audio.play();
});

<audio>要素によってサポートされるイベントの詳細については、W3Schoolsを参照してください。

于 2012-05-17T19:35:30.750 に答える