2nd Volume Slider, HTML Collection vs NodeList

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>

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.

1 Like

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

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.