preloadjs + howler 音频不播放

Question

我正在尝试制作我的第一个网站。 我在本地工作，所以如果你需要一个在线网站来调试它，我可以上传它。 我想在第一次访问时创建一个预加载部分，其中显示预加载栏/% 进度并在显示页面之前加载所有元素。 我正在做网站的音频部分和预加载器。 为了完成这部分，我使用 howler.js 进行音频管理，使用 preloadjs.js 进行预加载器部分。 我无法解决的问题是在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 函数加载的文件与 howler 调用无关，并且在缓存中找不到 mp3 文件。

非常感谢您的帮助。

Answer 1

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

PreloadJS 实际上只设计用于加载要使用SoundJS 播放的 WebAudio 声音。事实上，它实际上使用了很多共享代码来下载和准备音频以供播放。这不一定是设计使然（以防止使用其他库），但 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");

希望对您有所帮助。