如何使用Tone.js的Tone.player暂停音乐（mp3）？

Question

如何使用Tone.js的Tone.player暂停音乐（mp3）？

Tee*_*Tee 0 javascript p5.js pause web-audio-api tone.js

我是tone.js 的新手，我只想要一个简单的暂停按钮。我知道有一个 stop() 和 start() 但它不是暂停，何时再次开始音乐只是转到歌曲的开头。

我使用tone.js 是因为我想操纵音乐并进行一些合成声音。我也使用 p5.js 但不知何故暂停不起作用。它抛出一个错误，说“无法读取未定义的属性‘长度’。所以我想使用tone.js，但只需要弄清楚如何暂停音乐。谢谢。

这是代码

var player = new Tone.Player("data/audio/singingbird_audio.mp3").toMaster();
var whale = new Tone.Player("data/audio/whale.mp3").toMaster();
whale.autostart = false;
whale.volume.value = -10;
player.autostart = false;
player.volume.value = 5;
player.stop();

button = createButton('Play Bird');
button.position(20, 200);
button.mousePressed(birdSwitch);

function birdSwitch() {
    if (player.state == "started") {
        player.stop();
        whale.stop();
    } else if (player.state == "stopped") {
        player.start();
        whale.start();
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Eff*_*nky 5

不知道为什么约翰内斯如此受欢迎。绝对没有理由不使用 Tone.js。这是一个非常酷的图书馆。

此外，实际的解决方案比约翰内斯毫无帮助地想出的解决方案更容易。

解决方案

从字面上看，您需要做的就是将 Player 对象同步到 Tone.Transport，然后您可以通过控制 Transport 而不是播放器来全天播放/暂停/停止

尝试修改您的代码，使其看起来像这样

var player = new Tone.Player("data/audio/singingbird_audio.mp3").toMaster();
var whale = new Tone.Player("data/audio/whale.mp3").toMaster();

// sync the Players to the Transport like this
player.sync().start(0);
whale.sync().start(0);

whale.volume.value = -10;
player.volume.value = 5;

button = createButton('Play Bird');
button.position(20, 200);
button.mousePressed(birdSwitch);

function birdSwitch() {
    if (player.state == "started") {
        // Use the Tone.Transport to pause audio
        Tone.Transport.pause();
    } else if (player.state == "stopped") {
        // Use the Tone.Transport to start again
        Tone.Transport.start();
    }
}

Run Code Online (Sandbox Code Playgroud)

其他想法

如果您想让程序的 UI 变得更加简单，您可能还需要考虑使用“tonejs-ui.js”库，其中有一个很棒的“播放/暂停/停止”按钮。

只需在您的文件中包含指向“tonejs-ui.js”库的链接<head>，然后您就可以<tone-play-toggle>在 HTML 中使用该元素并向其添加一个事件侦听器来触发传输启动/暂停。

下面是您需要添加到 HTML 文件中的代码示例以及添加到 JavaScript 中的事件侦听器，而不是您自己的按钮所使用的逻辑。希望这是有道理的。

<head>
   <!-- The tonejs-ui.js CDN link     -->
   <script type="text/javascript" src="https://unpkg.com/@tonejs/ui@0.0.8/build/tonejs-ui.js"></script>

</head>

<body>

   <tone-content>
      <tone-play-toggle></tone-play-toggle>
   </tone-content>

   <script type="text/javascript">
      document.querySelector("tone-play-toggle").addEventListener("play", (e) => {

         const playing = e.detail;

         if (playing){
            Tone.Transport.start();
         } else {
            Tone.Transport.pause();
         }
      });

   </script>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，11 月前
查看次数：	2604 次
最近记录：	5 年，9 月前