spielen Sie einen Ton auf das Bild klicken in html

Arbeite ich an einem Alphabete kid learning-website, und möchte einen sound Abspielen bei Klick auf ein Bild. z.B. wenn der Benutzer klickt auf Einen(Bild) dann in den hintergrund-sound Aussprache gespielt werden müssen. Kann es möglich ohne Verwendung von java-script? Könnte mir jemand helfen?

  • ohne Javascript? Wie?
  • da ich in dieser Zeit müssen nur die Prototypen der Webseite.
  • Ich weiß nicht, ob das möglich wäre. Der code ist ziemlich einfach obwohl. stackoverflow.com/questions/10083788/...
InformationsquelleAutor Aaqiba | 2016-01-09
  1. 2

    Ohne JavaScript? Ich denke so nicht, aber der JavaScript-Code ist sehr einfach.

    Können Sie spielen Sie eine audio-element, das Sie in Ihre Seite mitdocument.getElementById('audioTag').play();
    So sollte dies funktionieren:

    <a onclick="document.getElementById('yourAudioTag').play();">
     <img src="yourSrc.jpg">
</a>

    JSFiddle.

    Könnten Sie sogar in der Lage, um die onclick-Methode in Ihre image-tag selbst etwa so:

    <img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">

    Dann können Sie die .pause() Methode zum anhalten der audio-und .load() wenn Sie möchten, laden einige neue audio. Es funktioniert so ähnlich wie das video-tag in HTML5.

    Und wenn Sie nicht wollen, um ein element zu verwenden, für die audio -, können Sie erklären es wie folgt:

    var audio = new Audio('audio_file.mp3'); audio.play();

    und es verwenden die gleiche Weise. Nur statt 

    document.getElementById('yourAudioTag').play();

    verwenden Sie

    audio.play();

    Ein Beispiel, die ganze Sache würde wie folgt Aussehen:

     <a onclick="myAudioFunction('A');">
     <img src="A.jpg">
 </a>
 <a onclick="myAudioFunction('B');">
     <img src="B.jpg">
 </a>
 <script>
     var aAudio = new Audio('a.mp3');
     var bAudio = new Audio('b.mp3');
     function myAudioFunction(letter) {
         if(letter == 'a') {
             aAudio.play();
         } else if(letter == 'b') {
             bAudio.play();
         }
     }
 </script>
    • es ist nicht in Ordnung. Bild ist nicht anklickbar.
    • Es funktioniert hier auf diesem jfiddle? jsfiddle.net/zefoo314/ujb19mcx/2
    • Ich benutze Visual Studio 2015. es ist nicht bei diesem.
    • das ist für mich arbeiten .. man kann die Funktion allgemeineren Initialisierung der Pfad innerhalb es funktionieren myAudioFunction(Wort) { var base = "C/"; var Pfad=base.concat(word, ".mp3"); var textAudio = new Audio(Pfad); textAudio.play(); }
    InformationsquelleAutor Balake
  2. 0

    Interessante Frage.

    Offensichtlich, sollten Sie gehen für eine JavaScript-Lösung (wie dieser Beitrag).
    Zitat css-tricks.com:

    Wieder leider, wir können nicht sagen, dass ein <audio> element, was zu tun ist, über CSS, also müssen wir JavaScript.

    Aber Sie haben eine ganz schöne Herausforderung.

    Den <audio> element hat die Fähigkeit zu zeigen, steuert. In den meisten Browsern, die play-Taste kommen würde, erste von Links in den Kontrollen.
    Also, wenn Sie wickeln die entsprechenden <audio> element in Ihrem Brief-element (<div>/<img>/etc.), dann, mit ein wenig absolute-Positionierung Magie und niedrigen opacity für die <audio> könnten Sie Ihren Brief "über den Ton". Also, wenn Benutzer klicken Sie auf den Buchstaben, den Sie tatsächlich klicken Sie auf den play-button.

    Wenn Sie die Standardeinstellung des Browsers kontrolliert, dann sind Sie browser-abhängig, wie die Kontrollen Dimensionen unterscheiden sich zwischen den Browsern. Sie können jedoch erstellen Sie benutzerdefinierte Steuerelemente, oder Spieler auf dem Markt verfügbar (wie JPlayer), ständige Abmessungen passen auf Ihre Briefe.

    Beispiel und Demo:

    Dem folgenden code wird ein klicken Sie auf den Brief H spielen einen sound von einem Pferd, solange du es testen in einem Chrome-browser.

    CSS:

    div#lH {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  z-index: 1;
  font-size: 25px;
  text-align:center;
}
audio#aH {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 0.01;
}

    HTML:

    <div id="lH">
  <audio controls id="aH">
    <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
    <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
H
</div>

    Hier ein JSFiddle.

    InformationsquelleAutor remdevtec
Schreibe einen Kommentar