無法讓 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();