jouer un son sur l'image, cliquez en html

Je suis en train de travailler sur un alphabet enfant l'apprentissage de site web, et que vous voulez jouer un son en cliquant sur une image. par exemple, si l'utilisateur clique sur l'Un(l'image), puis en fond sonore de la prononciation de A doit être joué. Peut-elle possible sans l'aide de java script? Quelqu'un pourrait-il aider?

sans Javascript? Comment?
parce qu'à ce moment, j'ai juste besoin de prototypes de site web.
Je ne sais pas si cela serait possible. Le code est assez simple. stackoverflow.com/questions/10083788/...

InformationsquelleAutor Aaqiba | 2016-01-09

html

2

Sans JavaScript? Je ne le pense pas, mais le JavaScript est très facile.

Vous pouvez jouer à un élément audio que vous avez mis dans votre page avecdocument.getElementById('audioTag').play();
Donc, cela devrait fonctionner:
```
<a onclick="document.getElementById('yourAudioTag').play();">
     <img src="yourSrc.jpg">
</a>
```
JSFiddle.

Vous pourriez même être en mesure de mettre la méthode onclick dans votre balise image elle-même comme:
```
<img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">
```
Vous pouvez ensuite utiliser la .pause() méthode pour mettre en pause l'audio et .load() si vous souhaitez charger des nouveaux fichiers audio. Il fonctionne de manière similaire à la balise vidéo HTML5.

Et si vous ne voulez pas utiliser un élément pour l'audio, vous pouvez le déclarer comme ceci:
```
var audio = new Audio('audio_file.mp3'); audio.play();
```
et de l'utiliser de la même façon. Seulement au lieu de
```
document.getElementById('yourAudioTag').play();
```
vous utilisez
```
audio.play();
```
Un exemple de l'ensemble de la chose qui ressemblerait à quelque chose comme ceci:
```
 <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>
```
- il n'est pas de travail. L'Image n'est pas cliquable.
- Il travaille ici sur ce jfiddle? jsfiddle.net/zefoo314/ujb19mcx/2
- Je suis à l'aide de Visual Studio 2015. il n'est pas de travailler sur ce.
- cela fonctionne pour moi .. vous pouvez rendre la fonction plus générique en initialisant le chemin à l'intérieur de la fonction myAudioFunction(mot) { var base = "C/"; var path=base.concat(mot, ".mp3"); var textAudio = new Audio(chemin); textAudio.play(); }
InformationsquelleAutor Balake
0

Question intéressante.

Évidemment, vous devez aller pour une solution d'activer JavaScript (comme ce post).
Pour citer css-tricks.com:

De nouveau malheureusement, nous ne pouvons pas dire à un <audio> élément de ce faire par le biais de CSS, donc nous aurons besoin de JavaScript.

Cependant, vous avez défini un beau défi.

La <audio> élément a la capacité d'afficher les commandes. Dans la plupart des navigateurs, le bouton de lecture viendrait en premier à partir de la gauche dans les contrôles.
Ainsi, si vous encapsuler le approprié <audio> élément à l'intérieur de votre lettre élément (<div>/<img>/etc.), puis, avec un peu de positionnement absolu, de la magie, et de la faible opacity pour la <audio>, vous pourriez mettre votre lettre "sur le son". Ainsi, lorsque l'utilisateur clique sur la lettre, ils ont fait, cliquez sur le bouton de lecture.

Si vous utilisez le navigateur par défaut de contrôles, alors vous êtes sur le navigateur dépendante, comme les contrôles dimensions diffèrent entre les navigateurs. Cependant, vous pouvez créer des contrôles personnalisés, ou utiliser les joueurs disponibles sur le marché (comme JPlayer), d'avoir constamment dimensions pour s'adapter à vos lettres.

Exemple et de Démonstration:

Le code suivant va faire un clic sur la lettre H jouer un son d'un cheval, aussi longtemps que vous le tester dans un navigateur Chrome.

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>
```
Voici un JSFiddle.

InformationsquelleAutor remdevtec

Vous devez vous connecter pour publier un commentaire.