Слайдер 2-го тома, коллекция HTML и список узлов - PullRequest
Новая
       1

Слайдер 2-го тома, коллекция HTML и список узлов

0 голосов
/ 04 октября 2018

Попытка изменить селектор запросов, чтобы он возвращал только аудиотэги для акцентов, оставляя зацикливания для другого слайдера.

Кажется, что критическое изменение наступает при замене 

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

с 

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

Единственное отличие, которое я вижу при сравнении players с x, заключается в html collection с nodelist .Должен ли я пытаться преобразовать его в список узлов?W3 предполагает, что я все еще мог бы разделить их по className, но я не уверен, как ..

Совет: Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным классом.имя, то вы можете перебрать все элементы и извлечь нужную информацию.

playersvsx nodelistvshtmlcollection открыть со ссылкой на демо-версию

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 column -->
  <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 ]

0 голосов
/ 06 октября 2018

Получил ответ на другом форуме, вернулся, чтобы исправить патч .. вроде очевидно теперь, когда я это вижу.Это выглядит по-другому, потому что я не вижу div на экране, просто «слышу», как они портятся у меня в голове.

Обычно вы конвертируете его в массив, как вы делали это с помощью клавиш.(Я не уверен, возможно ли вообще преобразовать его в список узлов).Но почему бы просто не продолжать использовать querySelectorAll () вместо этого? 

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

Еще одна вещь, на которую следует обратить внимание, это то, что коллекция HTML всегда активна, то есть она автоматически обновляется при изменении DOM;это также означает, что это дороже, чем список узлов.

0 голосов
/ 06 октября 2018

Быстрая помощь:

Возвращает коллекцию html : 

document.getElementsByClassName("accent")

Выбирает первый элемент с акцентом класса: 

document.getElementsByClassName("accent")[0]

Это возвращает список узлов 

document.querySelectorAll("audio")

Это ловит первый аудиоэлемент: 

document.querySelectorAll("audio")[0]

Это также ловит первый аудиоelement: 

document.querySelector("audio")

Теперь, чтобы объявить что-то по всем элементам, вам нужно выполнить цикл через *. 1024 * 

document.querySelectorAll("audio").forEach(function(){
  console.log(e)
})

Это большой плюс для списков узлов, лучше встроенныйВозможности:

NodeList.item () Возвращает элемент в списке по его индексу или ноль, если индекс выходит за пределы.

Альтернатива для доступа к nodeList [я] (который вместо этого возвращает неопределенное, когда я за пределами).Это в основном полезно для реализаций DOM не на языках JavaScript.

NodeList.entries () Возвращает итератор, позволяющий коду проходить через все пары ключ / значение, содержащиеся в коллекции.(В этом случае ключи - это числа, начинающиеся с 0, а значения - узлы.)

NodeList.forEach () Выполняет предоставленную функцию один раз для каждого элемента NodeList, передавая элемент в качестве аргумента функции.

NodeList.keys () Возвращает итератор, позволяющий коду проходить через все ключи пар ключ / значение, содержащихся в коллекции.(В этом случае ключи - это числа, начинающиеся с 0.)

NodeList.values ​​() Возвращает итератор, позволяющий коду пройти через все значения (узлы) пар ключ / значение, содержащихся в коллекции.

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/API/Document https://developer.mozilla.org/en-US/docs/Web/API/Element

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...