无法让 Tone.js 播放器工作并播放单个 wav 文件
P粉231079976
P粉231079976 2023-09-01 10:34:17
[Vue.js讨论组]
<p>无法让 Tone Player 播放任何内容,这是我的简单 VueJs 代码:</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;div&gt; &lt;h1&gt;Simple Tone.js Demo&lt;/h1&gt; &lt;button style=&quot;background-color: cadetblue; padding: 4px 10px;&quot; @click=&quot;play&quot;&gt;Play&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import * as Tone from &quot;tone&quot;; export default { data() { return { player: null, }; }, methods: { async play() { try { console.log(&quot;Tone.js context state:&quot;, Tone.context.state); if (Tone.context.state !== &quot;running&quot;) { await Tone.start(); console.log(&quot;audio context started&quot;); } this.player.start(); } catch (error) { console.error(&quot;Error during playback:&quot;, error.message, error); } }, async initializePlayer() { console.log(Tone.context.state); try { this.player = await new Tone.Player({ url: &quot;/sounds/rain.wav&quot;, loop: true, autostart: false, }).toDestination(); this.player.loaded; } catch (error) { console.error(&quot;Error loading audio file:&quot;, error); } console.log(&quot;Audio file loaded&quot;, this.player.loaded); }, }, created() { this.initializePlayer(); }, }; &lt;/script&gt;</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();
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号