Question 277749 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to assign different audio to different buttons after clicked event

  <h1 id="title">Drum 🥁 Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>

var tekan = document.querySelectorAll(".drum");

tekan.forEach(drum => {
drum.addEventListener("click", play);
})

function play() {
// const sound = ["crash.mp3", "kick.mp3", "snare.mp3", "tom1.mp3", "tom2.mp3", "tom3.mp3", "tom4.mp3"];

var audio = new Audio('sounds/crash.mp3');
audio.play();  
};

When I click each button, it will only play the crash.mp3 audio, how do I assign different audio like the one in const sound to each button?

I tried to use this keyword so that it changes the audio file source (/crash.mp3) in

var audio = new Audio('sounds/crash.mp3');

according to the button clicked. I guess my knowledge of this keyword is still vague, or is there any way other than this? It would be great if I could only use Javascript for this.

Tags:

2

Answers


  1. 0

    When an event listener is triggered, the callback function receives the event that triggered it as an argument, with it you can determine which button was clicked. In your case you can use the element’s class for that.

    The element’s class can be accessed using the event.target.className for the string with all of the classes or event.target.classList for a list containing a string for each class.

    For your use case classList[0] contains the relevant information as the key label is the first class.

    const tekan = document.querySelectorAll(".drum");

tekan.forEach(drum => {
  drum.addEventListener("click", play);
})

const drumSoundFiles = {
  "w": "crash.mp3", 
  "a": "kick.mp3", 
  "s": "snare.mp3",
  "d": "tom1.mp3", 
  "j": "tom2.mp3",
  "k": "tom3.mp3",
  "l": "tom4.mp3"
}

function play(event) {
  const pressedKey = event.target.classList[0]
  const soundFile = drumSoundFiles[pressedKey]

  const audio = new Audio(`sounds/${soundFile}`)
  audio.play()
};

    Remember to map each key in the drumSoundFiles object to the correct sound.

    Login or Signup to reply.
  2. 0

    Certainly! You may accomplish this by including the audio file location associated with each button as a data property in your HTML and then accessing this data attribute in your JavaScript code. Here’s how you can modify your HTML and JavaScript to accomplish this:

    <h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
    <button class="w drum" data-sound="crash.mp3">w</button>
    <button class="a drum" data-sound="kick.mp3">a</button>
    <button class="s drum" data-sound="snare.mp3">s</button>
    <button class="d drum" data-sound="tom1.mp3">d</button>
    <button class="j drum" data-sound="tom2.mp3">j</button>
    <button class="k drum" data-sound="tom3.mp3">k</button>
    <button class="l drum" data-sound="tom4.mp3">l</button>
</div>

    Each button in this amended HTML contains a data-sound property identifying the audio file to be played.

    var tekan = document.querySelectorAll(".drum");

tekan.forEach(drum => {
    drum.addEventListener("click", play);
});

function play() {
    var soundFile = this.getAttribute("data-sound");
    var audio = new Audio('sounds/' + soundFile);
    audio.play();
}

    This refers to the button element that was clicked in the play function. You may access the value of the data-sound attribute associated with the clicked button by using this.getAttribute("data-sound"). The path to the matching audio file is then constructed using this value, and the Audio object is generated and played.

    As a result, depending on the data-sound attribute value supplied in the HTML, each button will play a different audio file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search