I want to make a website with several different buttons where each one plays a different sound. Can someone help me? I tried to make this code below, but the other part doesn't work :/ Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS AND SOUNDS</title>
</head>
<body>
<h1>Sound Effects</h1>
<div class="phrase1">
<audio id='phrase1'>
<source src="sound1.wav">
</audio>
<button>Play 1!</button>
<script>
const button = document.querySelector('button')
button.addEventListener('click', function(){
const audio= document.querySelector('#phrase1')
audio.currentTime = 0
audio.play()
})
</script>
</div>
<div class="phrase2">
<audio id='phrase2'>
<source src="sound2.wav">
</audio>
<button>Play 2!</button>
<script>
const button = document.querySelector('button')
button.addEventListener('click', function(){
const audio= document.querySelector('#phrase2')
audio.currentTime = 0
audio.play()
})
</script>
</div>
</html>
Your query selector always only finds the first button. Try to give your buttons a different id to distinct them and use that in your querySelector()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUTTONS AND SOUNDS</title>
</head>
<body>
<h1>Sound Effects</h1>
<div class="phrase1">
<audio id='phrase1'>
<source src="sound1.wav">
</audio>
<button id="button1">Play 1!</button>
<script>
const button1 = document.querySelector('#button1')
button1.addEventListener('click', function(){
const audio= document.querySelector('#phrase1')
audio.currentTime = 0
audio.play()
})
</script>
</div>
<div class="phrase2">
<audio id='phrase2'>
<source src="sound2.wav">
</audio>
<button id="button2">Play 2!</button>
<script>
const button2 = document.querySelector('#button2')
button2.addEventListener('click', function(){
const audio= document.querySelector('#phrase2')
audio.currentTime = 0
audio.play()
})
</script>
</div>
</html>
Should do it.
Part of your problem is here:
const button = document.querySelector('button')
You should be using an ID-based CSS selector, rather than just the name of an HTML element, to find the button you want. Something like this would be better:
<button id="playone">Play 1!</button>
...
const button = document.querySelector('#playone')
Opa, tá aqui o código:
<!DOCTYPE html>
<html>
<head>
<title>Player com botões</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<div id="buttons"></div>
<audio id="audio"></audio>
</div>
<script type="text/javascript">
const buttons = document.querySelector('#buttons');
const audio = document.querySelector('#audio');
const player = {
format: 'mp3',
buttons: [
{
name: 'Botão do som 1',
url: 'audio1.mp3'
},
{
name: 'Botão do som 2',
url: 'audio2.mp3'
}
],
render() {
this.buttons.map((button, b) => {
buttons.innerHTML += `
<button onclick="player.play(${b});">${button.name}</button>
`;
});
},
play(button_id) {
audio.pause();
audio.innerHTML = `
<source src="${this.buttons[button_id].url}" type="audio/${this.format}">
`;
audio.load();
audio.play();
}
};
player.render();
</script>
</body>
</html>