2nd Volume Slider, HTML Collection vs NodeList


#1

Trying to change the query selector to only return audio tags for the accet beats, leaving the backloops for the other slider.
The breaking change seems to come when I replace

const players = document.querySelectorAll("audio");

with

var x = document.getElementsByClassName("accent");

The only difference I see when comparing players to x is html collection to nodelist. Should I be trying to convert it to a nodelist?
W3 suggest I could still seperate them by className, but I’m not sure how…
Tip: You can use the length property of the NodeList object to determine the number of elements with a specified class name, then you can loop through all elements and extract the info you want.



reop with link to live demo
JavaScript

window.addEventListener("keypress", playSound);
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
const players = document.querySelectorAll("audio");
var x = document.getElementsByClassName("accent");
const volumeControl = document.getElementById("accent-control");
// const loopVolume = document.getElementById("backloop-control");
let globalVolume = 1;

function removeTransition(e) {
  if (e.propertyName !== "transform") return;
  e.target.classList.remove("playing");
}

volumeControl.addEventListener("change", function() {
  globalVolume = volumeControl.value / 100;

  players.forEach(function(player) {
    player.volume = globalVolume;
  });
});

function playSound(e) {
  //   const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();
  const keyName = event.key;
  const audio = document.querySelector(`audio[data-sound-id="${keyName}"]`);
  const key = document.querySelector(`div[data-sound-id="${keyName}"]`);
  if (!audio) return;

  key.classList.add("playing");
  audio.currentTime = 0;
  audio.play();
}
console.log(players);
console.log(x);

HTML

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jklMACHINE</title>
  <meta name="description" content="remember when we all skinned our music players?">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/normalize.css">
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <link rel="stylesheet" href="css/main.css">
</head>

<body id="body">
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  <div class="keys">
    <div data-sound-id="a" class="key">
      <kbd>a</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-sound-id="s" class="key">
      <kbd>s</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-sound-id="d" class="key">
      <kbd>d</kbd>
      <span class="sound">kick</span>
    </div>
  </div><!-- keys -->

  <div class="keyz-loop">
    <div data-sound-id="7" class="key">
      <kbd>7</kbd>
      <span class="sound">backloop</span>
    </div>
    <div data-sound-id="8" class="key">
      <kbd>8</kbd>
      <span class="sound">backloop</span>
    </div>
  </div><!-- keyz loop -->
  <div class="container">
    <input id="accent-control" type="range" min="0" max="100" step="1">SetVolume</input>
    <input id="backloop-control" type="range" min="0" max="100" step="1">backloop aavolume control</input>
    <h5>
      press <code>[a,s,d] to play one of 3 DRUM sounds</code><br /><br />
      press <code>[7 or 8] to play a BACKING LOOP</code><br /><br /><br />

      <a href="https://freesound.org/people/TurtleWolfe/bookmarks/category/90037/" rel="link">freeSOUND.org</a><br />
      check out my bookmarks & then go link your own collections<br />
      by editing the url source of the audio tags.<br /><br />
      <code>
        &lt;audio data-sound-id="1"&gt;<br/>
        &lt;source type="audio/wav" src="https://github...wav?raw=true" /&gt;<br/>
        &lt;/audio&gt;<br/>
      </code><br />
      <a href="https://www.twitch.tv/videos/315409005" rel="link">window.addEventListener("keypress",
        playSound);</a><br />
      global volume slider<br />
      drop down selector for looping backbeat<br /><br />

      project inspired after first 33 videos which cover the fundamentals<br />
      <a href="https://www.udemy.com/share/10015YBEcTdV1aQQ==/" rel="link">Modern JavaScript From the Beginning</a><br />&
      the first of 30 tutorials<br />
      <a href="https://javascript30.com/" rel="link">https://javascript30.com/</a><br />
    </h5>

    <footer>
      <a href="https://github.com/TurtleWolf/jkl" rel="link" class="yallow">source code on
        github.io</a><br />
      <a href="https://turtlewolfe.com/" rel="link" class="yallow">Copyright 2018, TurtleWolfe.com</a>
    </footer>
  </div><!-- backloops on the right collumn -->
  <div>
    <!-- audio tags -->
    <audio data-sound-id="a" class="accent">
      <source type="audio/wav" src="javaScript30daysDRUM/clap.wav" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="s" class="accent">
      <source type="audio/wav" src="javaScript30daysDRUM/hihat.wav" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="d" class="accent">
      <source type="audio/wav" src="javaScript30daysDRUM/kick.wav" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="7" class="loop" loop>
      <source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/435147__kickhat__ambient-drone-21-07-2018.wav?raw=true" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="8" class="loop" loop>
      <source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/440957__l-q__coin-3.wav?raw=true" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="9" class="loop" loop>
      <source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/441375__malinby__organ.wav?raw=true" />
      Your browser does not support the <code>audio</code> element.
    </audio>
  </div><!-- audio tags -->
  <script src="app.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-4"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-125846162-4');
  </script>
</body>

</html>

#2

You’d typically convert it to an array as you did with the keys (I’m not sure if it’s even possible to convert it to a node list). But why not simply keep using querySelectorAll() instead?

var x = document.querySelectorAll('.accent')

Another thing to note is that a HTML collection is always live, i.e. it automatically updates when the DOM changes; this also means that it is more expensive than a node list.


#3

That was it, I’ve been stuck on this since Wednesday afternoon… thank you so much.