Impossible de faire fonctionner le lecteur Tone.js et de lire un seul fichier wav

Question

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

<template>
  <div>
    <h1>Démo Simple Tone.js</h1>
    <style de bouton="couleur de fond : bleu cadet ; rembourrage : 4px 10px;" @click="play">Play</bouton>
  </div>
</modèle>

<script>
importer * comme ton à partir de "ton" ;

exporter par défaut {
  données() {
    retour {
      joueur : nul,
    } ;
  },
  méthodes : {
    lecture asynchrone() {
      essayer {
        console.log("État de contexte Tone.js :", Tone.context.state);
        if (Tone.context.state !== "en cours d'exécution") {
          attendre Tone.start();
          console.log("contexte audio démarré");
        }
        this.player.start();
      } attraper (erreur) {
        console.error("Erreur lors de la lecture :", error.message, erreur);
      }
    },

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

      essayer {
        this.player = attendre un nouveau Tone.Player ({
          URL : "/sounds/rain.wav",
          boucle : vrai,
          démarrage automatique : faux,
        }).toDestination();

        ce.joueur.chargé;
      } attraper (erreur) {
        console.error("Erreur de chargement du fichier audio :", erreur);
      }
      console.log("Fichier audio chargé", this.player.loaded);
    },
  },
  créé() {
    this.initializePlayer();
  },
} ;
</script>

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

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

了解 Tone.js Il s'agit d'un GPT4, ou d'un GPT4.播放简单的文件。

Answer 1

Je suppose que l'erreur s'est produite parce que 播放器le téléchargement de l'audio n'est pas encore terminé.

Le constructeur ne rend pas ses promesses. Si vous voulez attendre Player 准备就绪，则需要传递 onload 函数。通过将其包装在 Promise 中，它可用于等待 Player c'est prêt.

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