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

Question

I'm new to tone.js and I just want a simple pause button.我是tone.js的新手，我只想要一个简单的暂停按钮。 I know that there is a stop() and start() but it's not a pause and when to start again the music just go to the beginning of the song.我知道有一个 stop() 和 start() 但这不是暂停，什么时候重新开始音乐只是转到歌曲的开头。

I use tone.js because I want to manipulate the music and do some synthesizing sound.我使用tone.js是因为我想操纵音乐并合成一些声音。 I also use p5.js but somehow the pause dose not work.我也使用 p5.js 但不知何故暂停不起作用。 It throws an error saying "Cannot read property 'length' of undefined. So I want to use tone.js but just have to figure out how to pause the music. Thanks.它抛出一个错误，说“无法读取未定义的属性‘长度’。所以我想使用tone.js，但只需要弄清楚如何暂停音乐。谢谢。”

Here's the code这是代码

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

Not sure why Johannes is being such a buzz kill.不知道为什么 Johannes 会如此火爆。 There's absolutely no reason NOT to use Tone.js.绝对没有理由不使用 Tone.js。 It's a really cool library.这是一个非常酷的图书馆。

Besides, the ACTUAL solution is easier than the solution Johaness so unhelpfully came up with.此外，ACTUAL 解决方案比 Johaness 提出的解决方案更容易。

SOLUTION解决方案

Literally all you need to do is sync the Player objects to the Tone.Transport and then you can play/pause/stop all day long by controlling the Transport instead of the players从字面上看，您需要做的就是将 Player 对象同步到 Tone.Transport，然后您可以通过控制 Transport 而不是播放器来播放/暂停/停止一整天

Try modifying your code to look like this尝试修改你的代码看起来像这样

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

ADDITIONAL IDEAS其他想法

If you want to make the UI for your program even easier, you may also want to consider using the "tonejs-ui.js" library, which has a great Play/Pause/Stop button in it.如果你想让你的程序的 UI 更容易，你可能还想考虑使用“tonejs-ui.js”库，它有一个很棒的播放/暂停/停止按钮。

Just include the link to the "tonejs-ui.js" library in your <head> and then you can use the <tone-play-toggle> element in your HTML and add an event listener to it that triggers the Transport start/pause.只需在<head>包含指向“tonejs-ui.js”库的链接，然后您就可以在 HTML 中使用<tone-play-toggle>元素并向其添加触发传输开始/暂停的事件侦听器.

Here's an example of the code you'd need to add to your HTML file and the event listener to add to your javascript instead of the logic you're using for your own button.这是您需要添加到 HTML 文件和事件侦听器以添加到 javascript 而不是您用于自己的按钮的逻辑的代码示例。 Hopefully this makes sense.希望这是有道理的。

<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 is a bit of a overkill to just play an mp3 file. Tone.js 只是播放 mp3 文件有点矫枉过正。

Why not just using the <audio> -Tag?为什么不直接使用<audio> -Tag？ That way you can directly play and pause it.这样你就可以直接播放和暂停它。

<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 Codesandbox： https ://codesandbox.io/s/charming-wiles-ehy8y

In Tonejs a player is just a wrapper around an audio buffer.在 Tonejs 中，播放器只是音频缓冲区的包装器。 Play, pausing, etc. is done by syncing the players to the Transport class and use Transports play, pause, stop functionalities.播放、暂停等是通过将播放器同步到 Transport 类并使用 Transports 播放、暂停、停止功能来完成的。 Which then propagates to the players.然后传播给玩家。 But since the Transport has an internal timeline I don't think that this is what you need, since you would have to reset the Transport to the correct position, etc.但是由于传输有一个内部时间表，我认为这不是您需要的，因为您必须将传输重置到正确的位置等。

I guess in the end it's way more convenient for you to just fall back to the simpler solution.我想最终让您回到更简单的解决方案会更方便。

如何使用 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