Hinzufügen von sound-auf einen Klick ein Bild in HTML 5

Verwenden Wird nun vom Soundmanager und frei aus eine Menge Kopfschmerzen. Noch mehr wird es fallback schön zu blinken, wenn die audio nicht unterstützt nativ vom browser.

Allerdings, wenn Sie nicht wollen, um relais, die auf eine Drittanbieter-Bibliothek gibt es eine andere Lösung, ein wenig einschüchternd und anstrengend, aber funktionsfähig in jedem browser unterstützt den audio-tag.
Das erste, was Sie tun müssen, ist zu füllen Sie den audio-tag mit dem source-content. Sie können dies mit den folgenden Codezeilen:

<audio id = 'audio'>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

  <object class="playerpreview" type="application/x-shockwave-flash" 
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
           height="20" name="movie" align="" 
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio>

Weil es keinen gemeinsamen Vereinbarung zwischen verschiedenen browser-Anbieter in Bezug auf die unterstützten audio-format, die wir brauchen, um die jeweiligen unterstützten. Wenn ein browser nicht unterstützt, dann wird es zu überspringen und fallback auf den nächsten. Wenn keiner von Ihnen unterstützt wird, dann können Sie flash als fallback. Google AJAX Libraries API erleichtert sehr unsere Arbeit. Unten ist der vollständige code:

<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script>
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg"  onclick="playSound();">

<div id="fallback"></div>
<audio id = 'audio'>
      <source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" />
      <source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" />

      <object class="playerpreview" type="application/x-shockwave-flash" 
              data="player_mp3_mini.swf" width="200" height="20">
        <param name="movie" value="player_mp3_mini.swf" />
        <param name="bgcolor" value="#085c68" />
        <param name="FlashVars" value="mp3=test.mp3" />
        <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
               height="20" name="movie" align="" 
               type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
        </embed>
      </object>

    </audio>


<script>
    function playSound() {
        if (document.getElementById('audio').canPlayType) {
            if (!document.getElementById('audio').canPlayType('audio/mpeg')) {
                document.getElementById('audio').style.display = 'none';
                swfobject.embedSWF(
                "player_mp3_mini.swf", 
                "fallback", 
                "200", 
                "20", 
                "9.0.0", 
                "", 
                {"mp3":"http://www.hellopixel.net/click.mp3"}, 
                {"bgcolor":"#085c68"});                
            } else {
                document.getElementById('audio').play();
                document.getElementById('fallback').style.display = 'none';
            }
        }

    }
</script>​

Fiddle: http://jsfiddle.net/SMR4V/

Hinweis: ich habe nicht die ogg-Datei, so funktioniert nicht in firefox, denn der FF ist mit ogg-Dateien.

InformationsquelleAutor Simo Endre