vue.js 无法使Tone.js播放器工作并播放单个wav文件

lf3rwulv  于 2023-03-19  发布在  Vue.js
关注(0)|答案(1)|浏览(142)

有问题让Tone Player播放任何东西,这里是我的简单VueJs代码:

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

<script>
import * as Tone from "tone";

export default {
  data() {
    return {
      player: null,
    };
  },
  methods: {
    async play() {
      try {
        console.log("Tone.js context state:", Tone.context.state);
        if (Tone.context.state !== "running") {
          await Tone.start();
          console.log("audio context started");
        }
        this.player.start();
      } catch (error) {
        console.error("Error during playback:", error.message, error);
      }
    },

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

      try {
        this.player = await new Tone.Player({
          url: "/sounds/rain.wav",
          loop: true,
          autostart: false,
        }).toDestination();

        this.player.loaded;
      } catch (error) {
        console.error("Error loading audio file:", error);
      }
      console.log("Audio file loaded", this.player.loaded);
    },
  },
  created() {
    this.initializePlayer();
  },
};
</script>

我加载的声音位于正确的位置sound/rain.wav,如果我在chrome中输入其路径http://localhost:5173/sounds/rain.wav x1c 0d1x,浏览器能够正确打开它
我从运行应用程序中获得的输出:

有人能用Tone.js的知识帮助我让播放器播放一个单一的文件吗?我花了一整天的时间在这上面,甚至从事与GPT 4,但我得到了同样的问题,播放器是无法播放一个简单的文件.

qpgpyjmq

qpgpyjmq1#

我猜发生错误是因为Player还没有完成音频的下载。
构造函数不返回promise。如果你想等待Player准备好,你需要传递一个onload函数。它可以用来等待Player准备好,方法是将它 Package 在promise中。

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

相关问题