0
現在、キーを押すと有効になるドラムマシンの設定があります。私はクリックしてオーディオタグを有効にすることもできます。ここ キーの押下とオンクリックでオーディオタグを有効にする方法
は、ここでHTML構造<body>
<div class="container">
<div class="row">
<div data-key="65" class="key" id="a" >
<br/>A
<br/> Clap-808
</div>
<div data-key="83" class="key" id="s">
<br/>S
<br/> Hihat-808
</div>
<div data-key="68" class="key" id="d">
<br/>D
<br/> Kick-electro01
</div>
<div data-key="70" class="key" id="f">
<br/>F
<br/> Snare-sumo
</div>
</div>
<div class="row">
<div data-key="74" class="key" id="j">
<br/>J
<br/> Kick-deep
</div>
<div data-key="75" class="key" id="k">
<br/>K
<br/> Perc-808
</div>
<div data-key="76" class="key" id="l">
<br/>L
<br/> Openhat-808
</div>
<div data-key="186" class="key" id="semicolon">
<br/>;
<br/> Snare-lofi01
</div>
</div>
<div class="row">
<div data-key="90" class="key" id="z">
<br/>Z
<br/> Shaker-Shuffle
</div>
<div data-key="88" class="key" id="x">
<br/>X
<br/> Snare-electro
</div>
<div data-key="67" class="key" id="c">
<br/>C
<br/> Tom-808
</div>
<div data-key="86" class="key" id="v">
<br/>V
<br/> Hihat-ring
</div>
</div>
<div class="row">
<div data-key="77" class="key" id="m">
<br/>M
<br/>Kick-oldschool
</div>
<div data-key="188" class="key" id="comma">
<br/>,
<br/> Kick-slapback
</div>
<div data-key="190" class="key" id="period">
<br/>.
<br/>Kick-newwave
</div>
<div data-key="191" class="key" id="questionMark">
<br/>?
<br/>Kick-stomp
</div>
</div>
</div>
<audio id="sAudio" data-key="65" src="sounds/clap-808.wav" ></audio>
<audio src="./sounds/hihat-808.wav" data-key="83"></audio>
<audio src="./sounds/kick-electro01.wav" data-key="68"></audio>
<audio src="./sounds/snare-sumo.wav" data-key="70"></audio>
<audio src="./sounds/kick-deep.wav" data-key="74"></audio>
<audio src="./sounds/perc-808.wav" data-key="75"></audio>
<audio src="./sounds/openhat-808.wav" data-key="76"></audio>
<audio src="./sounds/kick-newwave.wav" data-key="186"></audio>
<audio src="./sounds/shaker-shuffle.wav" data-key="90"></audio>
<audio src="./sounds/snare-electro.wav" data-key="88"></audio>
<audio src="./sounds/tom-808.wav" data-key="67"></audio>
<audio src="./sounds/hihat-ring.wav" data-key="86"></audio>
<audio src="./sounds/kick-oldschool.wav" data-key="77"></audio>
<audio src="./sounds/kick-slapback.wav" data-key="188"></audio>
<audio src="./sounds/kick-newwave.wav" data-key="190"></audio>
<audio src="./sounds/kick-stomp.wav" data-key="191"></audio>
</body>
<script src='./javascript.js'></script>
</html>
でJavaScriptコードです。私は、コードを乾燥させ、個々のIDごとに複数のオンクリックを正しく作成しないようにします。それを行う最善の方法ではありません。
window.addEventListener('click',function(event){
console.log(event);
const audio = document.querySelector(`audio[data-key="${event}"]`)
// const audio = document.querySelector(`#s`).innerHTML
console.log(audio)
// const key = document.querySelector(`.key[data-key="${event.keyCode}"]`)
console.log(audio);
if(!audio) return;
audio.currentTime =0;
audio.play();
// key.classList.add('playing');
});
私はあなたの質問と非常に明確ではないよしかし、event.targetを使用すると、あなたを助けるかもしれない役立つかもしれません。 –
ええ、私は具体的にどのようにデータキー値をターゲットにするのだろうかと思っていました。 – jdip88