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

Question

我是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();
    }
}

Answer 1

不知道为什么 Johannes 会如此火爆。 绝对没有理由不使用 Tone.js。 这是一个非常酷的图书馆。

此外，ACTUAL 解决方案比 Johaness 提出的解决方案更容易。

解决方案

从字面上看，您需要做的就是将 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();
    }
}

其他想法

如果你想让你的程序的 UI 更容易，你可能还想考虑使用“tonejs-ui.js”库，它有一个很棒的播放/暂停/停止按钮。

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

这是您需要添加到 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>

Answer 2

Tone.js 只是播放 mp3 文件有点矫枉过正。

为什么不直接使用<audio> -Tag？ 这样你就可以直接播放和暂停它。

<button id="pause">Play/Pause</button>
<audio
  id="audioNode"
  src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3"
  controls
></audio>

const audio = document.getElementById("audioNode");

document.getElementById("pause").addEventListener("click", () => {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});

Codesandbox： https ://codesandbox.io/s/charming-wiles-ehy8y

在 Tonejs 中，播放器只是音频缓冲区的包装器。 播放、暂停等是通过将播放器同步到 Transport 类并使用 Transports 播放、暂停、停止功能来完成的。 然后传播给玩家。 但是由于传输有一个内部时间表，我认为这不是您需要的，因为您必须将传输重置到正确的位置等。

我想最终让您回到更简单的解决方案会更方便。

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

问题描述

2 个解决方案

解决方案1
2 2020-11-18 05:12:22

解决方案2
0 2020-09-29 08:44:07

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

问题描述

2 个解决方案

解决方案1 2 2020-11-18 05:12:22

解决方案2 0 2020-09-29 08:44:07

解决方案1
2 2020-11-18 05:12:22

解决方案2
0 2020-09-29 08:44:07