Riproduci file audio quando si fa clic sull'immagine

Non sono un programmatore nativo HTML, quindi per favore non saltare su di me per questa semplice domanda.Riproduci file audio quando si fa clic sull'immagine

Ho un'immagine che, io sono la visualizzazione utilizzando il seguente codice:

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

Voglio un file audio da riprodurre quando l'immagine viene cliccato. Riesco a rendere l'immagine un pulsante, ma questo è un pasticcio del layout della pagina per qualche motivo.

Io sto bene con l'utilizzo di qualsiasi lettore, ma l'unica cosa è che non voglio mostrare un giocatore invadente. Voglio solo che l'utente preme l'immagine e ascolta la musica. Se preme un'altra immagine, la musica corrente deve smettere di suonare e deve essere riprodotto un suono diverso.

Si prega di aiuto! Grazie!

fonte

2012-04-10 Prajoth

è possibile utilizzare il [HTML5 tag audio] (http://www.w3schools.com/html5/tag_audio.asp) e fai uso di javascript per avviarlo dopo aver cliccato – Neysor

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

Per prima cosa è necessario utilizzare jQuery. Puoi creare un po 'di <div> nella tua pagina con qualche id, per esempio;

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

Poi, nel vostro JavaScript, quando si desidera riprodurre il file, basta aggiungere

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

l'intero codice simile a;

<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>

Spero che questo aiuti.

fonte

2012-04-10 07:10:51

Mi piace questo solut ion, ma la descrizione del tag JavaScript dice "A meno che non sia incluso un altro tag per un framework/libreria, è prevista una pura risposta JavaScript." Forse questo sarebbe un buon supplemento per una pura risposta 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>

fonte

2013-11-05 04:44:38

Questa risposta https://stackoverflow.com/a/7620930/1459653 da @klaustopher (https://stackoverflow.com/users/767272/klaustopher) mi ha aiutato. Ha scritto:

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>`

Ecco come ho implementato il suo consiglio in modo che cliccando sul Impressionante icona di carattere "fa-volume-up" si traduce in "donkey2.mp3" (che si trova nella pagina Web dopo "mulo"). riproduzione del suono (nota: MP3 non gioca in tutti i browser):

<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>

fonte

2015-09-26 18:24:07

Riproduci file audio quando si fa clic sull'immagine

risposta

Problemi correlati