preloadjs + ревущий звук не играет - PullRequest
Новая
       13

preloadjs + ревущий звук не играет

0 голосов
/ 25 ноября 2018

Я пытался сделать свой первый сайт.Я работаю над локальным, так что если вам нужен онлайн-сайт для отладки, я могу загрузить его.Я хочу создать раздел предварительной загрузки при первом посещении, где показывают панель предварительной загрузки /% прогресса и загружают все элементы перед показом страницы.Я делаю аудио часть и предварительный загрузчик сайта.Чтобы выполнить эту часть, я использую howler.js для управления аудио и preloadjs.js для части preloader.Проблема, которую я не могу решить, состоит в том, чтобы запустить mp3 при полной функции загрузки mp3.Ниже приведен код, который я использовал.

Это музыкальная часть с ревуном. 

var baseurl = document.location.origin;
var soundfolder = baseurl+'/alink/wp-content/themes/alink/media/sounds/';

//SOUNDS EFFECTS
var bgmusic = [soundfolder+'background.mp3', soundfolder+'background.ogg'];

//Music background
var musicbg = new Howl({
    src: [bgmusic[0], bgmusic[1]],
    loop: true,
    volume: 0.5,
    preload: false,
});

Это часть предзагрузчика с prealodjs. 

//PRELOADER
var manifest;
var preload;
function setupManifest() {
    manifest = [{
        src:  baseurl+"/alink/wp-content/themes/alink/media/sounds/background.mp3",
        id: "mp3file"
    }
    ];
}
function startPreload() {
    preload = new createjs.LoadQueue(true);
    preload.on("fileload", handleFileLoad);
    preload.on("progress", handleFileProgress);
    preload.on("complete", loadComplete);
    preload.on("error", loadError);
    preload.loadManifest(manifest);
}
function handleFileLoad(event) {
    console.log("A file has loaded of type: " + event.item.type);
}

function loadError(evt) {
    console.log("Error!",evt.text);
}


function handleFileProgress(event) {
}

function loadComplete(event) {
    console.log("Finished Loading Assets");
    musicbg.play();
}
setupManifest();
startPreload();

После некоторых урокови руководящие принципы библиотеки js, в вызове howler я ввел параметр «preload: false».

Без части предварительной загрузки и без параметра «preload: false» музыкальная часть работает отлично.При вставке параметра и части кода предварительного загрузчика, когда вызывается функция loadComplete (), музыка не запускается.(в консоли функция вызывается правильно.

Я действительно не могу понять, в чем проблема, поэтому я спрашиваю вас, что я делаю не так. Я думаю, что есть отсутствующая часть, где файл загружен изФункции preloadjs не связаны с ревностным вызовом и не могут найти mp3-файл в кеше.

Большое спасибо за вашу помощь.

1 Ответ

0 голосов
/ 28 ноября 2018

если вы загружаете аудио, используя PreloadJS без установленного SoundJS, чтобы помочь с предварительной загрузкой, аудио может быть загружено только как HTMLAudio, что довольно ограничено.Я вполне уверен, что Howler использует контекст WebAudio, поэтому он просто перезагружает звук, когда ему это нужно.

PreloadJS действительно предназначен только для загрузки звуков WebAudio, которые будут воспроизводиться с SoundJS ,На самом деле, он на самом деле использует много общего кода для загрузки и подготовки аудио для воспроизведения.Это не обязательно предусмотрено (чтобы предотвратить использование других библиотек), но WebAudio использует общий аудио-контекст при предварительной загрузке аудио-буферов, и PreloadJS знает, как поделиться этим контекстом со SoundJS.Howler, вероятно, аналогичен, когда он предварительно загружается с использованием аудио-контекста, с которым он умеет работать.

Как сопровождающий библиотек CreateJS, я, конечно, предвзят, но если вы хотите предварительно загрузить аудио с PreloadJS, тогда SoundJSлучший вариант, чем Howler. 

var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound); // Tell PreloadJS to use SoundJS to load audio
// ... other queue stuff

// After loading is done:
createjs.Sound.play("soundId");

Надеюсь, это поможет.

...