Add mute button

src/Grid.js

@@ -125,6 +125,16 @@ class Grid { // eslint-disable-line no-unused-vars
  }
  }
 
+ /**
+ * Sets whether the ToneMatrix grid is muted.
+ * @param {boolean} muted - True for muted, false for unmuted
+ */
+ // eslint-disable-next-line class-methods-use-this
+ setMuted(muted) {
+ Util.assert(arguments.length === 1);
+ Tone.Destination.mute = muted;
+ }
+
  /**
  * Saves the grid's current state into a savestate string
  * @returns {string} savestate - The base64-encoded URL-encoded savestate string,

src/ToneMatrix.js

@@ -13,8 +13,9 @@ class ToneMatrix { // eslint-disable-line no-unused-vars
  * @param {Element} clipboardButtonEl - A DOM element that should copy the level code to the
  * clipboard when clicked
  */
- constructor(canvasWrapperEl, clearNotesButtonEl, clipboardInputEl, clipboardButtonEl) {
- Util.assert(arguments.length === 4);
+ constructor(canvasWrapperEl, clearNotesButtonEl, clipboardInputEl,
+ clipboardButtonEl, muteButtonEl) {
+ Util.assert(arguments.length === 5);
 
  /**
  * The main canvas element that ToneMatrix draws to
@@ -68,6 +69,18 @@ class ToneMatrix { // eslint-disable-line no-unused-vars
  // eslint-disable-next-line no-new
  new ClipboardJS(clipboardButtonEl);
 
+ // Mute button element
+
+ muteButtonEl.addEventListener('click', () => {
+ if (muteButtonEl.classList.contains('muted')) {
+ muteButtonEl.classList.remove('muted');
+ this.setMuted(false);
+ } else {
+ muteButtonEl.classList.add('muted');
+ this.setMuted(true);
+ }
+ });
+
  // Listen for clicks on the canvas
 
  let arming = null; // Whether our cursor is currently turning on or turning off tiles
@@ -231,6 +244,15 @@ class ToneMatrix { // eslint-disable-line no-unused-vars
  this.resetSharingURL(); // get rid of hash
  }
 
+ /**
+ * Sets whether the ToneMatrix application is muted.
+ * @param {boolean} muted - True for muted, false for unmuted
+ */
+ setMuted(muted) {
+ Util.assert(arguments.length === 1);
+ this.grid.setMuted(muted);
+ }
+
  /**
  * Writes encoded data to the "Share URL" input element on the screen.
  * @param {string} base64URLEncodedData - Base64, URL-encoded level savestate

src/index.html

@@ -58,10 +58,10 @@ <h1>ToneMatrix Redux</h1>
  <div class="overlay"></div>
  <a class="play-btn" href="javascript:void(0)"></a>
  </div>
- <p><a id="clearnotes" class="button" href="javascript:void(0)">Clear Notes</a> Based on <a href="https://tonematrix.audiotool.com/">ToneMatrix</a> - By <a href="https://www.maxlaumeister.com/">Max L</a></p>
+ <p><span id="muteButton"></span><a id="clearnotes" class="button" href="javascript:void(0)">Clear Notes</a> Based on <a href="https://tonematrix.audiotool.com/">ToneMatrix</a> - By <a href="https://www.maxlaumeister.com/">Max L</a></p>
  <script src="all.js"></script>
  <script>
- const toneMatrixInstance = new ToneMatrix(document.querySelector(".canvaswrap"), document.querySelector("#clearnotes"), document.querySelector("#clipboard-input"), document.querySelector(".clipboard"));
+ const toneMatrixInstance = new ToneMatrix(document.querySelector(".canvaswrap"), document.querySelector("#clearnotes"), document.querySelector("#clipboard-input"), document.querySelector(".clipboard"), document.querySelector("#muteButton"));
  </script>
  </body>
 </html>

src/style.scss

@@ -74,6 +74,25 @@ canvas,
  height: 26px;
 }
 
+#muteButton {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 15px;
+ width: 40px;
+ height: 40px;
+ background-image: url("volume-up.svg");
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ filter: invert(1);
+ opacity: 0.6;
+ cursor: pointer;
+}
+
+#muteButton.muted {
+ background-image: url("volume-mute.svg");
+}
+
 button,
 .button {
  background: #333;