无法让 Tone.js 播放器工作并播放单个 wav 文件
P粉231079976
P粉231079976 2023-09-01 10:34:17
0
1
650
<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>
P粉231079976
P粉231079976

全部回复(1)
P粉331849987

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

构造函数不返回承诺。如果您想等待 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();
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板