2012-04-10 18 views
7

Ich bin kein gebürtiger HTML Programmierer, also bitte spring nicht über mich über diese einfache Frage.Tondatei abspielen, wenn das Bild angeklickt wird

Ich habe ein Bild, das ich die Anzeige am mit dem folgenden Code:

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

Ich mag eine Sounddatei abgespielt werden soll, wenn das Bild angeklickt wird. Ich kann das Bild zu einem Knopf machen, aber das ist aus irgendeinem Grund das Layout der Seite verpfuscht.

Ich bin in Ordnung mit jedem Spieler, aber das einzige ist, dass ich nicht einen aufdringlichen Spieler anzeigen möchte. Ich möchte nur, dass der Benutzer das Bild drückt und die Musik hört. Wenn er ein anderes Bild drückt, muss die aktuelle Musik aufhören zu spielen, und ein anderer Ton muss abgespielt werden.

Bitte helfen! Vielen Dank!

+0

Sie die [html5 Audio-tag] (http://www.w3schools.com/html5/tag_audio.asp) verwenden können, und Verwenden Sie Javascript, um es nach dem Klicken auf – Neysor

+0

Mögliche Duplikate zu starten: http://stackoverflow.com/questions/8489710/how-can-iplay-sound-in-jquery-when-click-a-button – Victor

Antwort

5

Zuerst müssen Sie jQuery verwenden. Sie können einige <div> in Ihrer Seite mit einer ID erstellen, zum Beispiel;

<div id="wrap">&nbsp;</div>.

Dann in Ihrem JavaScript, wenn Sie die Datei abspielen möchten, fügen Sie einfach

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

der gesamte Code sieht ungefähr so ​​aus;

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

Hoffe, das hilft.

+0

Ich mag es diese Lösung ion, aber die Beschreibung des JavaScript-Tags lautet: "Wenn nicht auch ein anderes Tag für ein Framework/eine Bibliothek hinzugefügt wird, wird eine reine JavaScript-Antwort erwartet." Vielleicht wäre dies eine gute Ergänzung zu einer reinen JavaScript-Antwort. – setholopolus

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

Diese Antwort https://stackoverflow.com/a/7620930/1459653 von @klaustopher (https://stackoverflow.com/users/767272/klaustopher) hat mir geholfen. Er schrieb:

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

Hier ist, wie ich seinen Rat implementiert, so dass auf der Font Super Symbol „fa-Volumen-up“ klicken Ergebnisse in „donkey2.mp3“ (befindet sich auf der Webseite nach „mule“). Soundwiedergabe (Anmerkung: mp3 in allen Browsern nicht spielen):

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