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 库指南，在 howler 调用中我输入了 "preload: false" 参数。

没有预加载部分和"preload: false"参数，音乐部分完美运行。通过插入预加载器的参数和代码部分，当调用 loadComplete() 函数时，音乐不会启动。（在控制台中函数被正确调用。

我实在想不通问题出在哪里，所以我问你我做错了什么。我认为有一个缺失的部分，从 preloadjs 函数加载的文件与 howler 调用无关，并且它无法在缓存中找到 mp3 文件。

非常感谢您的帮助。

Answer 1

如果您使用 PreloadJS 加载音频而不使用 SoundJS "installed" 来协助预加载，则音频只能作为 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");

希望对您有所帮助。

preloadjs + howler 音频不播放

preloadjs + howler audio doesn't play

javascript

jquery

howler.js

preloadjs