vendredi 21 mai 2021

Audio tag is not defined error in javascript

window.addEventListener("keydown",function(e){    // window is an object in the js which has all the global functions and variables as its methods and properties
    console.log(e);                                // window object represents the browser's window
    console.log(e.keyCode);                        // keycode is a function in keybooard event for representing the keycode of that particular key pressed
    const audio=document.querySelector(`audio[data-key="${e.keyCode}"]`)  // this catches the particular element of audio tag which has the data key of pressed button
    const key=document.querySelector(`.key[data-key="${e.keyCode}"]`)
    console.log(audio) 
    console.log(key) 
    if(!audio)    // if we press the key other than M,U,S,I,C
    {
        return;
    } 
    audio.currentTime=0;  // this attribute will help to play the audio from the time alloted on rhs after hitting the button

    audio.play()    // if we would not have put the current time then the sound will not come again as the previous sound is already been played 
    key.classList.add('playing')     // this is made to add playing class into the key class, when we press the button
})
    function removetransition(e)
    {
      console.log(e)
      if(e.propertyName!=="transform")   // we are taking only the transform propety from all the transition properties
      {
          return;
      }
      console.log(e.propertyName)       // this will be printed when the transition will be ended
      this.classList.remove("playing")
    }
    const keys=document.querySelectorAll(".key")
    keys.forEach(key =>key.addEventListener("transitionend",removetransition)); 
    // this function will give all the transition that are associated with the function in which the transitionend listner is added, and then by function definition we can remove it                                       
    // a bunch of things will be transitioned so it will give all the transition and then we can select which one we can remove
    window.addEventListener("keydown",function(e){
        if(e.keyCode==16)
        {
            audio.pause();
            key.classList.remove("playing")
        }

    })  

I am writing this in Javascript. When I am running the e.keycode==16 event listener then it says that audio is not defined, even when i have already defined the audio as that sound which is already playing.




Aucun commentaire:

Enregistrer un commentaire