Что не так с этим аудио в HTML5? - PullRequest
Новая
       17

Что не так с этим аудио в HTML5?

2 голосов
/ 20 мая 2011

Hello Я очень злюсь на этот HTML5 и аудио материал с помощью JavaScript. Он работал нормально, когда он уже был в HTML, но, поскольку я переместил его в JavaScript, он просто не работал. Я не хочу использовать jQuery, потому что я хочу сохранить размер как можно меньше. Все функции существуют, и то же самое касается переменных. Chrome не дает мне никаких ошибок, но Инструменты разработчика Chrome в сети говорят; в ожидании . Так что я знаю, что он получает все данные, но ничего не возвращает. Возвращает без нагрузки и или * 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 ;)");});

1 Ответ

2 голосов
/ 17 мая 2012

Я заметил несколько проблем с вашим кодом. Сначала вы определяете функцию 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 .

...