Using JS to switch between text and state in ToneJS

I am facing an issue with the text not displaying in the "play-stop-toggle" element, despite my limited experience with JS.

My desired outcome includes:

  1. [SOLVED] The text in 
    <div id="play-stop-toggle" onclick="togglePlay()">Play</div>
    should toggle between PLAY and STOP when clicked,
  2. As a result, Tone.Transport.stop() and Tone.Transport.start() must toggle to control the playback of sound in var filter = new Tone.Filter.

The current issue is that the text toggles from PLAY to STOP on the first click but then fails to toggle back. Additionally, there is no sound output.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccb8a3a2a98cfdffe2f4e2fef9">[email protected]</a>/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>

javascripthtmlcsstone.js

Answer №1

After investigation, it appears that there were no audio events linked to the scheduler. Below is the JavaScript code that resolved my problem:

function togglePlay() {
  const status = Tone.Transport.state; // Can be '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()

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a search filter in Vue.js using a nested for loop

I am currently working with a JSON object that contains nested objects and I need to iterate over them to extract data. Everything is functioning correctly, but now I want to implement a search/filter feature where the search is performed on the second lev ...

javascriptjsonvue.jssearchfilter

Navigating Cross-Origin Resource Sharing (CORS) Challenges within

Currently in the process of developing an API utilizing our API server script and attempting to establish communication with the API on the IONIC framework application. Progress is being made, however, encountering a recurring issue with the cross-origin b ...

javascriptandroidangularjsionic-framework

What is the best way to utilize the same module across multiple files within a single project?

After learning that modules are cached when required, as explained in this post, I am wondering what the most efficient way is to write clean and readable code out of the various approaches available. Situation: I have three files named A, B, and C. All ...

javascriptnode.jsexpressmodulerequire

Upgrade your function to utilize Firebase V9 with Next.js framework

I recently updated my project to use version 9 of firebase, and since then, I've been encountering some code errors that I'm struggling to resolve. The previous function had the following structure, but now I need to update it to work with the n ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Tips on utilizing koa2 for streaming a video file:

I am looking to use Koa2 for streaming my video files, with support for HTTP 206 (Partial Content) requests. The code is functioning properly on Firefox but encountering issues in Chrome. In Chrome, the video request is only made once and then stops requ ...

javascriptnode.jsvideo-streaming

Button Menu in HTML

When you click the menu button, I want the text inside the class="greetings" div to change from "Welcome Jon deo" to just "G" So basically, whenever the menu button is clicked, display the letter G and hide or replace "Welcome Jon deo" Addition ...

htmlcssbootstrap-4

What is the most effective way to utilize an existing table in MySQL with a TypeORM entity?

While working with typeorm to connect to a mysql db, I encountered an issue where my table definition was overwriting an existing table in the database. Is there a way for me to use the entity module to fully inherit from an existing table without causin ...

javascriptmysqlnode.jsexpresstypeorm

Setting the response type to text in Angular 6 when making an http call

Attempting to send an HTTP request to the Spring REST API, which returns a string value ('success' or 'fail'). However, I am uncertain of how to specify the response type as a string value when making the call to the API. The error mess ...

javascriptangulartypescript

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

Executing numerous HTTP requests in a single Node.js HTTP request

I am attempting to make a single URL call that will fetch multiple URLs and store their JSON responses in an array, which will then be sent as the response to the end user. Here is what my code looks like: var express = require('express'); var ...

javascriptjsonnode.jsexpressnpm

Implement an AJAX function to prompt a save dialog before initiating the download process

I'm currently programming an embedded device in C with a web server. One of the tasks I am working on is downloading files from this device. I need to download several files at once, so I've set up an AJAX request that uses a POST method and send ...

javascriptajax

The Zip file generated in memory is experiencing corruption

I'm encountering an issue while attempting to serve a zip file generated in memory by Flask to a JavaScript front-end. However, the downloaded file appears corrupted and I am unsure of what mistake I may be making. @app.route('/route') def ...

javascriptpythonangularjsflaskzip

A guide on combining two native Record types in TypeScript

Is it possible to combine two predefined Record types in TypeScript? Consider the two Records below: var dictionary1 : Record<string, string []> ={ 'fruits' : ['apple','banana', 'cherry'], 'vegeta ...

javascripttypescript

What could be causing my cross fade to not repeat as intended?

I created a basic background image cross fader using the code found at http://jsfiddle.net/jRDkm/2/. This code was inspired by . However, I'm encountering an issue where the slideshow only repeats once before fading to white. How can I modify the cod ...

jquerycsssliderfade

Why isn't the unit test passing when it clearly should be?

I am encountering an issue with testing a simple function that I have created. Despite the fact that the function works correctly in practice, it is not being tested properly... Explanation of how my function operates (While it functions as intended, the ...

javascriptangulartypescripttestingkarma-runner

Having an issue where the Jquery clone function is only duplicating the content once. Looking to

I'm currently working on existing HTML table code. My goal is to copy the text from the 'th' header rows and paste them inside the corresponding td cells for each subsequent row. While I have successfully managed to copy the header row, it o ...

javascripthtmljquerycss

pick out particular values from an array

I have a question that may seem basic to some, but I'm curious about how to select specific elements from an array. In this case, I have an array with 100 elements: var cubes = [element1, element2, element3 ...] and I want to select elements 25-35. ...

javascripthtmlarrays

Unable to invoke JS function in Drupal 5 file

In my current project using Drupal 5, I have a specific .js file that is included using the code: drupal_add_js(drupal_get_path('module','MTM')."/include/JS_form.js"); Additionally, there is an element on the page: <a onclick="MTM ...

javascriptdrupal

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

javascripttypescriptvue.js

What is the best method to incorporate filtering in a CRUD table?

Frontend code: // Importing necessary components and libraries import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScal ...

javascriptnode.jsreactjsfrontendbackend