Question

我试图建立我的第一个网站。我正在本地工作，所以如果您需要在线网站进行调试，可以将其上传。我想在第一次访问时创建一个预加载部分，其中显示一个预加载栏/进度，并在显示页面之前加载所有元素。我正在做网站的音频部分和预加载器。为了完成这一部分，我将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库指南，在咆哮呼叫中，我输入了“ preload：false”参数。

没有预加载部分并且没有“ preload：false”参数，音乐部分可以完美运行。通过插入预加载器的参数和代码部分，当调用loadComplete（）函数时，音乐不会开始。（在控制台中，该函数已正确调用。

我真的不知道问题出在哪里，所以我问你我在做什么错。我认为缺少一个部分，其中从preloadjs函数加载的文件与咆哮调用无关，并且在缓存中找不到mp3文件。

非常感谢您的帮助。

Answer 1

如果您使用PreloadJS加载音频而没有“安装” SoundJS来辅助预加载，则音频只能作为HTMLAudio加载，这是非常有限的。我可以肯定的是，Howler使用了WebAudio上下文，因此它将在需要时重新加载音频。

PreloadJS实际上仅设计用于加载要用SoundJS播放的WebAudio声音。实际上，它实际上使用了大量共享代码来下载和准备音频以供回放。这不一定是设计使然（防止使用其他库），但是WebAudio在预加载音频缓冲区时使用共享的音频上下文，并且PreloadJS知道如何与SoundJS共享该上下文。咆哮可能与之相似，它使用它知道如何使用的音频上下文进行预加载。

作为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");

希望有帮助。

preloadjs +咆哮音频无法播放

1 个答案: