Der Tone.js-Player funktioniert nicht und spielt keine einzelne WAV-Datei ab

Question

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

<template>
  <div>
    <h1>Simple Tone.js Demo</h1>
    <button style="background-color: cadetblue; Polsterung: 4px 10px;" @click="play">Play</button>
  </div>
</template>

<script>
import * als Ton aus „tone“;

Standard exportieren {
  Daten() {
    zurückkehren {
      Spieler: null,
    };
  },
  Methoden: {
    asynchrones Play() {
      versuchen {
        console.log("Tone.js Kontextstatus:", Tone.context.state);
        if (Tone.context.state !== "running") {
          warte auf Tone.start();
          console.log("Audiokontext gestartet");
        }
        this.player.start();
      } Catch (Fehler) {
        console.error("Fehler während der Wiedergabe:", error.message, error);
      }
    },

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

      versuchen {
        this.player = warte auf neuen Tone.Player({
          URL: "/sounds/rain.wav",
          Schleife: wahr,
          Autostart: falsch,
        }).toDestination();

        this.player.loaded;
      } Catch (Fehler) {
        console.error("Fehler beim Laden der Audiodatei:", Fehler);
      }
      console.log("Audiodatei geladen", this.player.loaded);
    },
  },
  erstellt() {
    this.initializePlayer();
  },
};
</script>

确打开它 http://localhost:5173/sounds/rain.wav

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

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

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