将jQuery转换为纯JavaScript
我已经把一个音频序列器从jQuery转换成JavaScript,只有一行还没搞清楚,我不知道该怎么做
"use strict";
// $(function() {
let futureTickTime,
counter = 1,
metronome,
metronomeVolume = 1,
tempo = 90,
secondsPerBeat = 60 / tempo,
counterTimeValue = (secondsPerBeat / 4),
oscFrequency = 100,
timerID,
isPlaying = false,
osc;
/*_____________________________________________BEGIN load sounds*/
let sounds = audioBatchLoader({
kick: "sounds/kick.mp3",
snare: "sounds/snare.mp3",
hihat: "sounds/hihat.mp3",
shaker: "sounds/shaker.mp3"
});
//_____________________________________________END load sounds */
//_____________________________________________BEGIN Array Tracks
let kickTrack = [ ],
snareTrack = [ ],
hiHatTrack = [ ],
shakerTrack = [ ];
//_____________________________________________END Array Tracks
function scheduleSound(trackArray, sound, count, time) {
for (let i = 0; i < trackArray.length; i += 1) {
if (count === trackArray[i]) {
sound.play(time);
}
}
}
function playMetronome(time, playing, volume) {
if (playing) {
osc = audioContext.createOscillator();
osc.connect(metronome);
metronome.gain.value = volume;
metronome.connect(audioContext.destination);
if (counter === 1) {
osc.frequency.value = 500;
} else {
osc.frequency.value = 300;
}
osc.connect(metronome);
metronome.connect(audioContext.destination);
osc.start(time);
osc.stop(time + 0.1);
}
}
function playTick() {
// console.log("This is 16th note:" + counter);
secondsPerBeat = 60 / tempo;
counterTimeValue = (secondsPerBeat / 4);
counter += 1;
futureTickTime += counterTimeValue;
if (counter > 16) {
counter = 1;
}
}
function scheduler() {
if (futureTickTime < audioContext.currentTime + 0.1) {
playMetronome(futureTickTime, true, metronomeVolume);
scheduleSound(kickTrack, sounds.kick, counter, futureTickTime - audioContext.currentTime);
scheduleSound(snareTrack, sounds.snare, counter, futureTickTime - audioContext.currentTime);
scheduleSound(hiHatTrack, sounds.hihat, counter, futureTickTime - audioContext.currentTime);
scheduleSound(shakerTrack, sounds.shaker, counter, futureTickTime - audioContext.currentTime);
playTick();
}
timerID = window.setTimeout(scheduler, 0);
}
function play() {
osc = audioContext.createOscillator();
metronome = audioContext.createGain();
isPlaying = !isPlaying;
if (isPlaying) {
counter = 1;
futureTickTime = audioContext.currentTime;
scheduler();
} else {
window.clearTimeout(timerID);
}
}
document.querySelector('.play-stop-button').addEventListener('click', function() {
play();
});
// $(".play-stop-button").on("click", function() {
// play();
// });
//_____________________________________BEGIN metronome toggle
document.querySelector('.metronome').addEventListener("click",function(){
if(metronomeVolume){
metronomeVolume = 0;
}else{
metronomeVolume = 1;
}
});
// $(".metronome").on("click",function(){
// if(metronomeVolume){
// metronomeVolume = 0;
// }else{
// metronomeVolume = 1;
// }
// });
//__________________________________END metronome toggle
// $("#tempo").on("change", function() {
// tempo = $(this).val();
// $("#showTempo").html(tempo);
// });
document.getElementById('tempo').addEventListener("change", function() {
tempo = document.getElementById('showTempo').value();
// $("#showTempo").html(tempo);
document.getElementById('showTempo').innerHTML = tempo;
});
//__________________________________BEGIN create grid
for(let i=1;i<=4;i+=1){
//$(".app-grid").append("<div class='track-"+i+"-container' </div>");
document.querySelector('.app-grid').innerHTML += `<div class="track-${i}-container"> </div>`;
for(let j=1;j<17;j+=1){
//$(".track-"+i+"-container").append("<div class='grid-item track-step step-"+j+"'</div>");
document.querySelector(`.track-${i}-container`).innerHTML += `<div class="grid-item track-step step-${j}"></div>`;
}
}
//__________________________________END create grid
//______________________BEGIN Grid interactivity
const grid_item = document.querySelector('.grid-item');
// function sequenceGridToggler(domEle,arr){
// $(domEle).on("mousedown",".grid-item",function(){
// var gridIndexValue=$(this).index();
// var offset=gridIndexValue+1;
// var index=arr.indexOf(offset);
// if(index>-1){
// arr.splice(index,1);
// this.classList.remove('purple');
// } else {
// arr.push(offset);
// this.classList.add('purple');
// }
// });
// }
function sequenceGridToggler(domEle,arr){
document.querySelectorAll(`${domEle}`).forEach(item => {
item.addEventListener("mousedown", function(ele) {
let gridIndexValue=$(this).index();
// let gridIndexValue = item => [...item.parentNode.children].indexOf(item)
let offset=gridIndexValue+1;
let index=arr.indexOf(offset);
if(index>-1){
arr.splice(index,1);
this.classList.remove('purple');
} else {
arr.push(offset);
this.classList.add('purple');
}
})
})
}
sequenceGridToggler(".track-1-container .grid-item",kickTrack);
sequenceGridToggler(".track-2-container .grid-item",snareTrack);
sequenceGridToggler(".track-3-container .grid-item",hiHatTrack);
sequenceGridToggler(".track-4-container .grid-item",shakerTrack);
//______________________END Grid interactivity
// });
这是我还没搞清楚如何转换的那一行
(它位于sequenceGridToggler(domEle,arr) 函数中):
let gridIndexValue=$(this).index();
我尝试了各种方法,这个是我目前最接近的结果(其实并不算太接近):
let gridIndexValue = item => [...item.parentNode.children].indexOf(item)
解决方案
你的尝试是在创建一个函数。把箭头函数 item => 去掉,如下所示:
let gridIndexValue = [...item.parentNode.children].indexOf(item)
现在,gridIndexValue 是一个值,而不是一个函数。
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。