Правильная нагрузка для <audio> - PullRequest
Новая
       7

Правильная нагрузка для <audio>

4 голосов
/ 14 марта 2012

Я озираюсь и начинаю беспокоиться, что это невозможно.
Есть ли способ сделать стандартный тег <audio> с отступлениями ... 

<audio>
    <source src='song.ogg' type='audio/ogg'></source>
    <source src='song.mp3' type='audio/mp3'></source>
</audio>

... с событием onload.Я огляделся по сторонам, и все, что я мог найти, это некоторые хаки, которые могут или не могут работать (они не для меня в Chrome) и событие canplaythrough.
Причина, по которой я этого хочу, заключается в том, что я делаю презентацию, которая содержит множество аудиоклипов для воспроизведения в определенные моменты.Я не хочу, чтобы презентация начиналась до тех пор, пока не загрузится весь звук (в противном случае все может быть не синхронизировано).Я хочу, чтобы клипы загружались по одному за раз, чтобы я мог создать своего рода панель загрузки.Я действительно не хочу прибегать к использованию Flash-звука, потому что он должен демонстрировать чистые веб-технологии.

Так что, в принципе, у меня есть одна loadAudio функция, которая циклически перебирает массив аудиофайлов длязагружено audioQueue.loadAudio вызывается один раз, а затем вызывает себя, пока все файлы не будут загружены.Проблема в том, что я не нашел правильное событие для запуска загрузки следующего файла. 

loadAudio = function(index)
{
mer = audioQueue[index];
var ob = "<audio id='" + mer + "'><source src='resources/sounds/" + mer + ".ogg' type='audio/ogg'></source><source src='resources/sounds/" + mer + ".mp3' type='audio/mp3'></source></audio>";
$("#audios").append(ob);
$("#" + mer).get(0).addEventListener('A WORKING EVENT RIGHT HERE WOULD BE NICE', function() { alert("loaded"); 
     if (index + 1 < audioQueue) { loadAudio(index + 1); } }, false);
}

Итак.Есть ли шанс для правильной загрузки звука?Я в основном готов сделать что-нибудь, пока это все еще HTML и Javascript.

Ответы [ 2 ]

7 голосов
/ 15 марта 2012

Вы можете использовать loadeddata - MediaEvent . Например, вы можете поместить все ваши аудиофайлы в массив и сделать что-то вроде: 

var files = ['a.mp3', 'b.mp3'];

$.each(files, function() {
    $(new Audio())
        .on('loadeddata', function() {
            var i = files.indexOf(this);
            files.splice(i, 1);
            if (!files.length) {
                alert('Preloading done!');
            }
        })
        .attr('src', this);
});

РЕДАКТИРОВАТЬ : это более современный подход с 2016 года: 

var files = ['a.mp3','b.mp3'];

Promise
    .all(files.map(function(file) {
        return new Promise(function(resolve) {
            var tmp = new Audio();
            tmp.src = file;
            tmp.addEventListener('loadeddata', resolve);
        });
    })).then(function() {
        alert('Preloading done!');
    });
2 голосов
/ 14 марта 2012

Я сделал небольшую PONG-игру с WebGL и некоторыми аудио-тегами для звуков. Я заимствовал аудио-реализацию из HTML-реализации Opera Emberwind: https://github.com/operasoftware/Emberwind/blob/master/src/Audio.js

Их решение хорошо работало для меня (Chrome, Opera и Firefox). Может быть, это может вас заинтересовать? У них есть некоторый код, который попытается найти воспроизводимый формат из строки 22 и ниже.

...