0

I have a simple site that triggers sounds on javascript keypress events. I need it to work so that when another sound is triggered the previous sound stops. For example when I press the next chord, the previous chord stops playing. I also need to create exclusivity groups, so that the next chord stops the previous chord, but doesn't stop the drums.

  <div class="keys">
    <div data-key="90" class="key"> 
      <kbd>Z</kbd>
      <span class="sound">Intro Drums</span>
    </div>
    <div data-key="88" class="key">
      <kbd>X</kbd>
      <span class="sound">Verse Drums</span>
    </div>
    <div data-key="67" class="key">
      <kbd>C</kbd>
      <span class="sound">Build Drums</span>
    </div>
    <div data-key="86" class="key">
      <kbd>V</kbd>
      <span class="sound">Drop Drums</span>
    </div>
    <div data-key="66" class="key">
      <kbd>B</kbd>
      <span class="sound">Bmajor(VI)</span>
    </div>
    <div data-key="78" class="key">
      <kbd>N</kbd>
      <span class="sound">C#major(VII)</span>
    </div>
    <div data-key="77" class="key">
      <kbd>M</kbd>
      <span class="sound">D#m(i)</span>
    </div>
    <div data-key="188" class="key">
      <kbd><</kbd>
      <span class="sound">Bbm(v)</span>
    </div>
  </div>   


  <audio data-key="90" src="sounds/drums/Drums1_Tambo.mp3"></audio>
  <audio data-key="88" src="sounds/drums/Drums2_Verse.mp3"></audio>
  <audio data-key="67" src="sounds/drums/Drums3_BuildUp.mp3"></audio>
  <audio data-key="86" src="sounds/drums/Drums4_Drop.mp3"></audio>
  <audio data-key="66" src="sounds/dropChords/ChordsBass1_Bmaj(VI).mp3"></audio>
  <audio data-key="78" src="sounds/dropChords/ChordsBass2_CSharpmaj(VII).mp3"></audio> 
  <audio data-key="77" src="sounds/dropChords/ChordsBass3_DSharpm(i).mp3"></audio>
  <audio data-key="188" src="sounds/dropChords/ChordsBass4_Bbm(iv).mp3"></audio>

<script>

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if(!audio) return; // stops the function from running
    audio.currentTime = 0; //rewind to the start
    audio.play();
    key.classList.add('playing');
  };

  function removeTransition(e) {
    if(e.propertyName !== 'transform') return;
    this.classList.remove('playing');
  }

  const keys = document.querySelectorAll('.key');
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));

  window.addEventListener('keydown', playSound);
</script>


</body>
</html>
GraySmith00
  • 179
  • 1
  • 8
  • 1
    Do you have a specific problem? You've described what you "need", you've included code, but you haven't indicated if / where you are getting stuck, or if you're just asking us to "write this code for me please".... – random_user_name Feb 25 '18 at 16:17
  • 1
    May I also suggest doing some research? It appears to me that [this answer](https://stackoverflow.com/a/33723330/870729) contains the bits that you need to do what you've described. – random_user_name Feb 25 '18 at 16:19

0 Answers0