JS 在 ToneJS 中切换文本和状态答案

【问题标题】：JS to toggle text and state in ToneJSJS 在 ToneJS 中切换文本和状态
【发布时间】：2020-07-14 00:51:05
【问题描述】：

我很少用JS，不知道为什么“play-stop-toggle”中的文字不显示。

我想要的结果是：

[已解决] 当您单击 <div id="play-stop-toggle" onclick="togglePlay()">Play</div> 中的文本时，它会在 PLAY 和 STOP 之间切换，并且
相应地，Tone.Transport.stop() 和 Tone.Transport.start() 应该切换，以便 var filter = new Tone.Filter 中的声音停止/开始播放。

目前，文本只会在第一次点击时从播放切换到停止，但不会切换回。并且永远不会发出声音。

function togglePlay() {
  Tone.Transport.toggle();
  const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'
  const element = document.getElementById("play-stop-toggle");
  if (status == "started") {
    element.innerText = "STOP";
    Tone.Transport.stop()
  } else {
    element.innerText = "PLAY";
    Tone.Transport.start()
  }
}


var filter = new Tone.Filter({
  type: 'lowpass',
  Q: 12

}).toMaster()

body,
html {
  height: 100%;
  margin: 5em;
  background-color: black;
}

h1 {
  font-size: 2.1rem;
  /* text-align: center !important; */
  font-family: 'Courier New', Courier, monospace;
  margin: 0px;
  color: ghostwhite;
  padding-bottom: 20px;
  font-weight: bold;
  text-align: justify;
}

p {
  margin: 0;
  font-size: 2rem;
  font-family: 'Courier New', Courier, monospace;
  color: ghostwhite;
  padding-bottom: 20px;
  text-align: justify;
  font-weight: bold;
}

p.sig {
  margin: 0;
  font-size: 2rem;
  font-family: 'Courier New', Courier, monospace;
  color: ghostwhite;
  padding-bottom: 20px;
  text-align: right;
}

div.bodycontent {
  margin: 0px;
  padding: 0px;
  width: 375px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  display: none;
}

a:link,
a:visited {
  /* background-color: #f44336; */
  color: white;
  text-align: center;
  font-style: italic;
  text-decoration: underline;
  display: inline-block;
  cursor: pointer;
}

a:hover,
a:active {
  background-color: white;
  color: black;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/tone@13.8.25/build/Tone.js"></script>
  <script src="p1-fish.js"></script>
  <link rel="stylesheet" type="text/css" href="ristyle.css">
</head>

<body>

  <div class="bg">


    <h1>Heading</h1>
    <p>Text</p>

  </div>

  <div id="play-stop-toggle" onclick="togglePlay()">Play</div>

</body>

</html>

【问题讨论】：

关于您的代码是如何编写的，如果Tone.Transport.state 曾经“暂停”，您将始终看到PLAY。 .... 那么问题是Tone.Transport.toggle(); 是如何工作的？
您可能想删除第一行 - Tone.Transport.toggle();
@MoshFeu - 谢谢！这解决了文本来回切换的第一个问题。但我仍然坚持如何通过该交互触发/取消触发声音。
我想它应该可以正常工作。但是由于我对tone.js不熟悉，请创建一个工作示例（jsbin，codesandbox等），所以我会尝试与您一起调试。
@MoshFeu - 谢谢。这是一个 jsbin：jsbin.com/xixugek/edit?html,css,js,output

标签： javascript html css tone.js

【解决方案1】：

事实证明，没有音频事件与调度程序相关联。这个 JS 解决了我的问题：

function togglePlay() {
  const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'
  const element = document.getElementById("play-stop-toggle");
  if (status == "started") {
    element.innerText = "PLAY";
    Tone.Transport.stop()
  } else {
    element.innerText = "STOP";
    Tone.Transport.start()    
  }
  
  document.querySelector('#status').textContent = status;
}

var filter = new Tone.Filter({
  type: 'lowpass',
  Q: 12
}).toMaster()


var synth = new Tone.MembraneSynth().toMaster()

//create a loop
var loop = new Tone.Loop(function(time){
  synth.triggerAttackRelease("A1", "8n", time)
}, "2n")

//play the loop between 0-2m on the transport
loop.start(0)

【讨论】：