Question

您好我一直对使用JavaScript的HTML5和音频内容非常生气。当它已经在HTML中时它工作得很好但是因为我把它移到JavaScript它只是不工作。我不想使用jQuery，因为我想保持尽可能低的大小。所有的功能都存在，变量也是如此。 Chrome没有给我任何错误，但网络下的 Chrome开发者工具说明了这一点;未决即可。所以我知道它获取所有数据，但它只是没有返回任何东西。它不返回任何负载，或者* oncanplay * 。

有人可能会告诉我一些我可能做错的事情或可能存在错误的问题。感谢您阅读

保

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 ;)");});

Answer 1

我注意到你的代码存在一些问题。首先，您定义了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。

这个音频在HTML5中有什么问题？

1 个答案: