尝试更改查询选择器以仅返回加速节拍的音频标签，为其他 slider 保留后循环。
当我更换时，重大变化似乎就会到来
const players = document.querySelectorAll("audio");
与
var x = document.getElementsByClassName("accent");
将 players 与 x 进行比较时，我发现的唯一区别是 html collection 与 nodelist。我应该尝试将其转换为节点列表吗？
W3 建议我仍然可以通过 className 将它们分开，但我不确定如何..
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>
<audio data-sound-id="1"><br/>
<source type="audio/wav" src="https://github...wav?raw=true" /><br/>
</audio><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>
```
最佳答案
快速帮助:
这会返回 html collection :
document.getElementsByClassName("accent")
这将选择第一个带有类重音的元素:
document.getElementsByClassName("accent")[0]
这会返回 node list
document.querySelectorAll("audio")
这捕获了第一个音频元素:
document.querySelectorAll("audio")[0]
这也捕获了 first音频元素:
document.querySelector("audio")
现在，要在所有元素上声明某些内容，您需要循环。
document.querySelectorAll("audio").forEach(function(e){
console.log(e)
})
这是节点列表的一大优点，有更好的内置功能:
NodeList.item() Returns an item in the list by its index, or null if the index is out-of-bounds.
An alternative to accessing nodeList[i] (which instead returns undefined when i is out-of-bounds). This is mostly useful for non-JavaScript languages DOM implementations.
NodeList.entries() Returns an iterator, allowing code to go through all key/value pairs contained in the collection. (In this case, the keys are numbers starting from 0 and the values are nodes.)
NodeList.forEach() Executes a provided function once per NodeList element, passing the element as an argument to the function.
NodeList.keys() Returns an iterator, allowing code to go through all the keys of the key/value pairs contained in the collection. (In this case, the keys are numbers starting from 0.)
NodeList.values() Returns an iterator allowing code to go through all values (nodes) of the key/value pairs contained in the collection.
更多信息: https://developer.mozilla.org/en-US/docs/Web/API/Document https://developer.mozilla.org/en-US/docs/Web/API/Element
关于javascript - 第二卷 slider ，HTMLCollection 与 Nodelist，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52652532/