Im trying to create a function that when you click down anywhere on the page a sound is played. I can only find information on how to do this for buttons. If you can help me that would be amazing
html css and js
Thank you
This script binds an click event to any element in the body, upon click will play the sound stated in the audio tag.
<!doctype html>
<html>
<head>
<title>Play audio</title>
</head>
<body onload="addEvent()">
<script>
function addEvent(){
document.body.addEventListener("click", play)
}
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<h1>click any element on the body to play sound </h1>
<audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>Why dont just use onClick event on the body
<!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>Document</title>
</head>
<body onclick="playAudio()" style="height: 1000px;">
<p>CLICK</p>
<audio id="audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<script>
function playAudio() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
</body>
</html>you should just handle onclick event.
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
var should_play=true
window.onclick = () => {
if (should_play){
should_play=!should_play
let soundSource = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
let sound = new Audio(soundSource);
sound.play();
sound.onended = () => {
should_play=true
}
}
}
</script>
</html>
variable should_play has been defined for not to playing song again when it is playing.