JS 在 ToneJS 中切换文本和状态

Question

我很少用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 中的声音停止/开始播放。

目前，文本只会在第一次点击时从 PLAY 切换到 STOP，但不会切换回来。而且没有声音出来。

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>

Answer 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)

JS 在 ToneJS 中切换文本和状态

JS to toggle text and state in ToneJS

html

javascript

css

tone.js