Estoy tratando de crear un sitio web que reproduzca audio cuando se presiona un botón usando HTML/CSS, pero no estoy seguro de cómo hacer que el botón reproduzca el archivo de música cuando se presiona. ¿Alguien sabe cómo hacer esto? También puedo usar algo de Javascript, pero no soy el mejor si es necesario.
También soy consciente de que esta pregunta existe, pero no es un duplicado porque pregunta cómo hacerlo en python y tkinter, pero pregunto cómo hacerlo con HTML/CSS/JS.
Esto funcionará mejor acc. a su caso de uso.
const btn = document.getElementById("btn"); btn.onclick = () => { // Here you will add path to local file you have const audio = new Audio( "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" ); audio.play(); }; <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <button id="btn">Play Sound</button> </div> <script src="src/index.js"></script> </body> </html>Sí, JavaScript es bastante necesario para esto. Puede usar el elemento de audio para esto, algo así (codepen.io) :
<button class="start-audio-btn">Click me!</button> <!-- just some random mp3 I found --> <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" class="sound"></audio>Y luego agregue funcionalidad en JavaScript:
// Get the button element const button = document.querySelector('.start-audio-btn'); // Get the audio element const sound = document.querySelector('.sound'); // Start the audio element's playback using the `play` method when the button's clicked button.addEventListener('click', (_) => { sound.play(); });Esto resolvería todo lo que necesitaría para lidiar con el audio => Reproducir, Pausa, Detener, Silenciar y Activar sonido :)
playBtn.onclick = () => audio.play() stopBtn.onclick = () => {audio.pause(); audio.currentTime = 0;} pauseBtn.onclick = () => audio.pause() muteBtn.onclick = () => audio.muted = !audio.muted <audio controls id='audio'> <source src="yourAudioSource" type="audio/yourAudioExtension"> <!-- This text will be shown if a browser doesn't support the extension of your audio --> Your browser does not support the audio element. </audio> <button id="playBtn">Play</button> <button id="stopBtn">Stop</button> <button id="pauseBtn">Pause</button> <button id="muteBtn">Toggle Mute</button>