Tidak dapat membuat pemain Tone.js berfungsi dan memainkan satu fail wav

Question

无法让 Tone Player 播放任何内容，这是我的简单 VueJs 代码：

<template>
  <div>
    <h1>Simple Tone.js Demo</h1>
    <gaya butang="warna latar belakang: biru kadet; pelapik: 4px 10px;" @click="main">Main</button>
  </div>
</template>

<skrip>
import * sebagai Nada daripada "nada";

eksport lalai {
  data() {
    kembali {
      pemain: null,
    };
  },
  kaedah: {
    main async() {
      cuba {
        console.log("Tone.js context state:", Tone.context.state);
        jika (Tone.context.state !== "berjalan") {
          tunggu Tone.start();
          console.log("konteks audio dimulakan");
        }
        this.player.start();
      } tangkap (ralat) {
        console.error("Ralat semasa main balik:", error.message, error);
      }
    },

    async initializePlayer() {
      console.log(Tone.context.state);

      cuba {
        this.player = tunggu Tone.Player baharu({
          url: "/sounds/rain.wav",
          gelung: benar,
          autostart: palsu,
        }).toDestination();

        this.player.loaded;
      } tangkap (ralat) {
        console.error("Ralat memuatkan fail audio:", ralat);
      }
      console.log("Fail audio dimuatkan", this.player.loaded);
    },
  },
  dicipta() {
    this.initializePlayer();
  },
};
</script>

我正在加载的声音存在于正确的位置 sound/rain.wav 并且如果我在 chrome 中输入它的百输入它，我说打开它 http://localhost:5173/sounds/rain.wav

运行应用程序得到的输出：

了解 Tone.js 的人可以帮助我让播放器播放单个文件吗？我花了一整天的时间天的时，觗件吗？我花了一整天的时，觗件吗甚至使用了 GPT4，但我遇到了同样的问题，播放器无法播放简单的文件。

Answer 1

Saya rasa ralat berlaku kerana 播放器muat turun audio masih belum selesai.

Pembina tidak membalas janji. Kalau nak tunggu Player 准备就绪，则需要传递 onload 函数。通过将其包装在 Promise 中，它可用于等待 Player dah siap.

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();