JS для переключения текста и состояния в ToneJS - PullRequest
Новая
       60

JS для переключения текста и состояния в ToneJS

0 голосов
/ 14 июля 2020

Я редко использовал JS и не могу понять, почему не отображается текст в «play-stop-toggle».

Мой желаемый результат:

  1. [Решено] Текст в <div id="play-stop-toggle" onclick="togglePlay()">Play</div> переключается между PLAY и STOP при нажатии на него, а
  2. , соответственно, 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>

1 Ответ

0 голосов
/ 20 июля 2020

Оказывается, к планировщику не было привязано никаких звуковых событий. Это 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)
...