playing sound on click event with pure javascript
Question
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.
4 answers
solution1
7 2018-07-28 15:14:43
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.
solution2
1 2018-07-28 15:28:06
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();
};
To
function myPlay() {
var a = document.getElementById('sounds');
a.play();
}
solution3
0 2018-07-28 15:26:38
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> .
solution4
0 2018-07-28 17:44:02
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.