playing sound on click event with pure javascript

html code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>
<body>

  <audio id="sounds" loop= "false" volume = "60">
    <source src="sounds/clap.wav" id="A" type="audio/wav">
    <source src="sounds/boom.wav" id="S" type="audio/wav">
    <source src="sounds/hihat.wav" id="D" type="audio/wav">
    <source src="sounds/kick.wav" id="F" type="audio/wav">
    <source src="sounds/snare.wav" id="G" type="audio/wav">
    <source src="sounds/ride.wav" id="H" type="audio/wav">
    <source src="sounds/tom.wav" id="J" type="audio/wav">
  </audio> 

<div class="keys">
  <div class="key">
    <button id="common1" class="key_link" type="submit">CLAP</button>
  </div>
  <div class="key">
    <a href="#" id="common2" type="button" class="key_link">BOOM</a>
  </div>
  <div class="key">
    <a href="#" id="common3" class="key_link">HIHAT</a>
  </div>
  <div class="key">
    <a href="#" id="common4" type="submit" class="key_link">KICK</a>
  </div>
  <div class="key">
    <a href="#" id="common5" type="submit" class="key_link">SNARE</a>
  </div>
  <div class="key">
    <a href="#" id="common6" type="submit" class="key_link">RIDE</a>
  </div>
  <div class="key">
    <a href="#" id="common7" type="submit" class="key_link">TOM</a>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

Javascript:

var button = document.getElementById('common1'); // 

button.addEventListener('click', myPlay); 

function myPlay() {
    var a = document.getElementById('A');
    a.play();
} ;

First one is a button, and the rest are anchor tags. Because I was just not sure with what it will work. If it will not work with anchors, that's okay with me, but it's not working with button too.

I also used the onclick() with button tag. But it didn't work either. Then i read somewhere that using event listeners is a better practice. So i am trying to implement it by event listeners.

html code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>
<body>

  <audio id="sounds" loop= "false" volume = "60">
    <source src="sounds/clap.wav" id="A" type="audio/wav">
    <source src="sounds/boom.wav" id="S" type="audio/wav">
    <source src="sounds/hihat.wav" id="D" type="audio/wav">
    <source src="sounds/kick.wav" id="F" type="audio/wav">
    <source src="sounds/snare.wav" id="G" type="audio/wav">
    <source src="sounds/ride.wav" id="H" type="audio/wav">
    <source src="sounds/tom.wav" id="J" type="audio/wav">
  </audio> 

<div class="keys">
  <div class="key">
    <button id="common1" class="key_link" type="submit">CLAP</button>
  </div>
  <div class="key">
    <a href="#" id="common2" type="button" class="key_link">BOOM</a>
  </div>
  <div class="key">
    <a href="#" id="common3" class="key_link">HIHAT</a>
  </div>
  <div class="key">
    <a href="#" id="common4" type="submit" class="key_link">KICK</a>
  </div>
  <div class="key">
    <a href="#" id="common5" type="submit" class="key_link">SNARE</a>
  </div>
  <div class="key">
    <a href="#" id="common6" type="submit" class="key_link">RIDE</a>
  </div>
  <div class="key">
    <a href="#" id="common7" type="submit" class="key_link">TOM</a>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

Javascript:

var button = document.getElementById('common1'); // 

button.addEventListener('click', myPlay); 

function myPlay() {
    var a = document.getElementById('A');
    a.play();
} ;

First one is a button, and the rest are anchor tags. Because I was just not sure with what it will work. If it will not work with anchors, that's okay with me, but it's not working with button too.

I also used the onclick() with button tag. But it didn't work either. Then i read somewhere that using event listeners is a better practice. So i am trying to implement it by event listeners.

Share Improve this question edited Jul 28, 2018 at 15:33 Dipu 8,2794 gold badges35 silver badges51 bronze badges asked Jul 28, 2018 at 14:53 Shubham 611 gold badge1 silver badge5 bronze badges

can you specify your problem?Also show your relevant code here.. – NullPointer Commented Jul 28, 2018 at 15:16
You are calling play from the wrong html tag element, and you are not using the source tag element correctly. Please check my answer. – f-CJ Commented Jul 28, 2018 at 15:40

Add a comment |

4 Answers 4

Sorted by: Reset to default 11

There is no need to include the audio tags. Instead you can just say in javascript what audio you want to play.

function myPlay(){
    var audio = new Audio("sample.mp3");
    audio.play();
}

When you execute this function the audio will play.

Try this example, https://jsfiddle.net/nerdvoso/46f7rxbs/1/

Following code:

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');

var playSound = function() {
    audio.play();
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function(){audio.pause()}, false);

<audio id="audio" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>

Update, https://jsfiddle.net/nerdvoso/46f7rxbs/33/

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var nextBtn = document.getElementById('next');
var prevBtn = document.getElementById('prev');

var soundSelected = document.getElementById("audio1");

var playSound = function() {soundSelected.play();};

var stopSound = function() {soundSelected.pause();};

var nextSound = function() {
  if(soundSelected.nextElementSibling){
    soundSelected.pause();
    soundSelected.currentTime = 0;
    soundSelected = soundSelected.nextElementSibling;
  }
};


var prevSound = function() {
  if(soundSelected.previousElementSibling){
    soundSelected.pause();
    soundSelected.currentTime = 0;
    soundSelected = soundSelected.previousElementSibling;
  }
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', stopSound, false);
nextBtn.addEventListener('click', nextSound, false);
prevBtn.addEventListener('click', prevSound, false);

<div id="playList">
    <audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
    <audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio>
</div>
<button id="prev">Prev</button>
<button id="play">Play</button>
<button id="stop">Stop</button>
<button id="next">Next</button>

Play sound by dedicated buttons, enter link description here

var playSoundBtn = document.getElementsByClassName("playSound");

var playSound = function() {
    var attribute = this.getAttribute("data-sound");
    var sounds = document.getElementsByTagName('audio');
    for(i=0; i<sounds.length; i++){
        sounds[i].pause();
        sounds[i].currentTime = 0;
    }
    document.getElementById(attribute).play();
};

for (var i = 0; i < playSoundBtn.length; i++) {
    playSoundBtn[i].addEventListener('click', playSound, false);
}

<audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
<audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio>
<hr>
<button class="playSound" data-sound="audio1">Sound 1</button>
<button class="playSound" data-sound="audio2">Sound 2</button>

You are getting the wrong element with document.getElementById. The id of your audio tag is sounds, but you are trying to get it with the id A.

Change

function myPlay() {
    var a = document.getElementById('A');
    a.play();
};

function myPlay() {
    var a = document.getElementById('sounds');
    a.play();
}

The purpose of <source> html tag is not to point to different audio content, but same audio content with different format so the browser can choose which format is more appropriate.

So you should have something like this:

<audio id="clap" loop= "false" volume = "60">
    <source src="sounds/clap.wav" id="A" type="audio/wav">
</audio>
<audio id="boom" loop= "false" volume = "60">
    <source src="sounds/boom.wav" id="S" type="audio/wav">
</audio>
...

And if you want to offer different formats for the same sound you could have something like this:

<audio id="clap" loop= "false" volume = "60">
    <source src="clap.mp3" type="audio/mpeg">
    <source src="clap.wav" type="audio/wav">
</audio>

And you should be doing:

var clap = document.getElementById("clap");
clap.play();

Take in consideration that it is the <audio> html tag from the one you can call play(), not from <source>.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

playing sound on click event with pure javascript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)