Volume Slider

JavaScript
1

Hoping to allow the volume slider to affect all of the audio tags, or really just the ones in this unordered list. There’ll be another column soon that needs its own volume adjustment
The Slider is appearing in the console log, but I need to assign it before the sound is plaid

capturevolumeslider
capturevolumeslider1920×1108 160 KB

gitHUB repo

HTML

<!DOCTYPE html>
<html 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">
  <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">
  <title>pianoMACHINE</title>
</head>

<body id="body">
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div id="main" class="card">

          <div class="card-action">
              <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
            <h2 id="task-title">asdfg</h2>
            <ul class="collection">
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    A
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="a" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/a1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    S
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="s" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/a1s.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    D
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="d" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/b1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    F
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="f" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    G
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="g" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c1s.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    H
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="h" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c2.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    J
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="j" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/d1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    K
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="k" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/d1s.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    L
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="l" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/e1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

JavaScript

// const form = document.querySelector("form");
const taskInput = document.getElementById("task");
const heading = document.querySelector("h2");
// const select = document.querySelector("select");
const body = document.querySelector("body");
// Clear input
// taskInput.value = "";

// Keypress
//taskInput.addEventListener("keypress", runEvent);
body.addEventListener("keypress", runEvent);
// Focus
// taskInput.addEventListener('focus', runEvent);
// Blur
// taskInput.addEventListener('blur', runEvent);
// Input
// taskInput.addEventListener('input', runEvent);
// Change
// select.addEventListener('change', runEvent);

let globalVolume = 1;
window.SetVolume = function(val) {
  var player = document.getElementsByTagName("audio");
  console.log("Before: " + player.volume);
  player.volume = val / 100;
  globalVolume = player.volume;
  console.log("After: " + player.volume);
};
function runEvent(e) {
  const keyName = event.key;
  //audio.volume = globalVolume; // trying to apply this audio volume to note below
  const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();

  // alert("keypress event\n\n" + "key: " + keyName);
  console.log(`EVENT TYPE: ${e.type}`);
  console.log(e.target.value);
  console.log(keyName);
  heading.value = "";
  heading.innerText = keyName;
  // Get input value
  // console.log(taskInput.value);
  // e.preventDefault();
}
2

.getElementsByTagName() returns a node list containing all players, and adding a .volume property to that list won’t have any effect to the contained elements; instead, you’ll have to iterate over the elements and set their .volume like so:

const players = document.querySelectorAll('audio')
const volumeControl = document.getElementById('volume-control')
let globalVolume = 1

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

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

I don’t understand how I should structure that.
Should I still be using window.SetVolume ?
the next step is going to be a seperate slider,
this first one for the accent beats
and then a second one for a background loop

JavaScript

const players = document.querySelectorAll("audio");
const volumeControl = document.getElementById("volume-control");
let globalVolume = 1;

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

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

const heading = document.querySelector("h2");
// const select = document.querySelector("select");
const body = document.querySelector("body");
// Keypress
//taskInput.addEventListener("keypress", runEvent);
body.addEventListener("keypress", runEvent);
function runEvent(e) {
  const keyName = event.key;
  //audio.volume = globalVolume; // trying to apply this audio volume to note below
  const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();

  // alert("keypress event\n\n" + "key: " + keyName);
  console.log(`EVENT TYPE: ${e.type}`);
  console.log(e.target.value);
  console.log(keyName);
  heading.value = "";
  heading.innerText = keyName;
  // Get input value
  // console.log(taskInput.value);
  // e.preventDefault();
}
4

You might, but using .addEventListener() instead has a couple of advantages (the function passed as the 2nd argument would be the pendant to your SetVolume() function):

  1. You don’t mix HTML and JS
  2. You can add multiple event listeners of the same type
  3. You don’t have to pollute the global scope

So I’d suggest to always use .addEventListener().

BTW, note that by convention only constructor functions start with a capital letter.

5

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