Reproduce el archivo de sonido cuando se hace clic en la imagen

No soy un programador nativo de HTML, así que no me hagas preguntas sobre esta simple pregunta.Reproduce el archivo de sonido cuando se hace clic en la imagen

que tienen una imagen que, estoy mostrando usando el siguiente código:

<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />

Quiero un archivo de sonido que se reproduce cuando se hace clic en esa imagen. Puedo hacer que la imagen sea un botón, pero eso está estropeando el diseño de la página por alguna razón.

Estoy bien con el uso de cualquier reproductor, pero lo único es que no quiero mostrar un jugador intrusivo. Solo quiero que el usuario presione la imagen y escuche la música. Si presiona otra imagen, la música actual debe dejar de reproducirse y se debe reproducir un sonido diferente.

Por favor ayuda! ¡Gracias!

Fuente

2012-04-10 Prajoth

puede utilizar la [HTML5 etiquetas de audio] (http://www.w3schools.com/html5/tag_audio.asp) y hacer uso de javascript para iniciarlo después de hacer clic en – Neysor

Posible duplicado: http://stackoverflow.com/questions/8489710/how-can-i-play-sound-in-jquery-when-click-a-button – Victor

Primero tienes que usar jQuery. Puede crear algunos <div> en su página que tengan alguna identificación, por ejemplo;

<div id="wrap"> </div>.

Luego, en JavaScript, cuando se quiere reproducir el archivo, sólo tiene que añadir

$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');

todo el código es algo así como;

<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#track1').click(function(){ 
    $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>'); 
}); 
}); 
</script> 
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" /> 
<div id="wrap">&nbsp;</div>

Espero que esto ayude.

Fuente

2012-04-10 07:10:51

Me gusta esta solución Por ejemplo, la descripción de la etiqueta de JavaScript dice "A menos que se incluya otra etiqueta para un marco/biblioteca, se espera una respuesta de JavaScript pura". Tal vez este sería un buen complemento para una respuesta pura de JavaScript. – setholopolus

<html>  
    <body> 
     <div id="container"> 
      <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" class="play" /> 
     </div> 
    </body> 
</html>

<script> 
     $(document).ready(function() { 
      var audioElement = document.createElement('audio'); 
      audioElement.setAttribute('src', 'audio.mp3'); 
      audioElement.setAttribute('autoplay', 'autoplay'); 
      //audioElement.load() 

      $.get(); 

      audioElement.addEventListener("load", function() { 
       audioElement.play(); 
      }, true); 

      $('.play').click(function() { 
       audioElement.play(); 
      }); 

      $('.pause').click(function() { 
       audioElement.pause(); 
      }); 
     }); 
    </script>

Fuente

2013-11-05 04:44:38

Esta respuesta https://stackoverflow.com/a/7620930/1459653 por @klaustopher (https://stackoverflow.com/users/767272/klaustopher) me ayudó. Él escribió:

HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface: 

`<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> 
    <button onclick="document.getElementById('sound1').play();">Play 
    it</button>`

Así es como he implementado su consejo para que al hacer clic en el icono de fuente impresionante "fa-volumen-up" en los resultados "donkey2.mp3" (que se encuentra en la página web después de "mula"). juego de sonido (nota: MP3 no se reproduce en todos los navegadores):

<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>

Fuente

2015-09-26 18:24:07

Reproduce el archivo de sonido cuando se hace clic en la imagen

Respuesta

Cuestiones relacionadas