无法让 Tone.js 播放器工作并播放单个 wav 文件

Question

<p>无法让 Tone Player 播放任何内容，这是我的简单 VueJs 代码：</p> <pre class="brush:php;toolbar:false;"><模板>

简单 Tone.js 演示

<按钮样式=”背景颜色：cadetblue;内边距：4px 10px;” @click=“播放”>播放

</模板> <脚本> 从“tone”导入*作为Tone； 导出默认值{ 数据（） { 返回 { 玩家：空， }; }, 方法： { 异步播放() { 尝试 { console.log("Tone.js 上下文状态：", Tone.context.state); if (Tone.context.state !== "正在运行") { 等待 Tone.start(); console.log(“音频上下文已启动”); } this.player.start(); } 捕获（错误）{ console.error("播放时出错：", error.message, error); } }, 异步初始化播放器() { console.log(Tone.context.state); 尝试 { this.player = 等待新的 Tone.Player({ url: "/sounds/rain.wav", 循环：真， 自动启动：假， }).toDestination(); this.player.loaded； } 捕获（错误）{ console.error(“加载音频文件时出错：”, error); } console.log("音频文件已加载", this.player.loaded); }, }, 创建（）{ this.initializePlayer(); }, }; </脚本></pre> <p>我正在加载的声音存在于正确的位置 sound/rain.wav 并且如果我在 chrome 中输入它的路径，浏览器能够正确打开它 http://localhost:5173/sounds/rain.wav </p> <p>运行应用程序得到的输出：</p> <p>了解 Tone.js 的人可以帮助我让播放器播放单个文件吗？我花了一整天的时间来解决这个问题，甚至使用了 GPT4，但我遇到了同样的问题，播放器无法播放简单的文件。</p>

Answer 1

我猜发生错误是因为播放器尚未完成音频的下载。

构造函数不返回承诺。如果您想等待 Player 准备就绪，则需要传递 onload 函数。通过将其包装在 Promise 中，它可用于等待 Player 准备就绪。

this.player = await new Promise((resolve, reject) => {
    const player = new Tone.Player({
        loop: true,
        onerror: (err) => reject(err),
        onload: () => resolve(player),
        url: '/sounds/rain.wav'
    });
});

this.player.toDestination();