Estoy tratando de crear una función que cuando hace clic en cualquier parte de la página se reproduce un sonido. Solo puedo encontrar información sobre cómo hacer esto para los botones. si me puedes ayudar seria increible
html css y js
Gracias
Este script vincula un evento de clic a cualquier elemento del cuerpo; al hacer clic, se reproducirá el sonido indicado en la etiqueta de audio.
<!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>¿Por qué no usar simplemente el evento onClick en el cuerpo?
<!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>solo debe manejar el evento onclick.
<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>Se ha definido la variable should_play para no volver a reproducir la canción cuando se está reproduciendo.