Come fare a

Immagini con audio

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Audio al passaggio del mouse



NOTA: il tuo browser potrebbe bloccare l'audio per le impostazioni di sicurezza.


Codice:
<div class="audio-container">  
<a href="" onmouseover="playclip();"><img id="hoverElement" src="URLimmagine" border="0" alt=""></a>    
<audio id="audio">
<source src="file.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="file.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>
</div>
<script>
var hoverArea = document.getElementById('hoverElement');
var audio = document.getElementById('audio');
hoverArea.onmouseover= function(){
audio.play();}
hoverArea.onmouseout= function(){
audio.pause();}
</script>

Al posto di "file.mp3" mettete l'indirizzo del file audio.
Per essere sicuri che l'audio sia supportato su diversi dispositivi, potete caricare sia il formato.ogg che il formato .mp3
Al posto di "URLimmagine" mettete l'indirizzo della vostra immagine.

Tenete presente che l'evento "onmouseover" di solito non funziona sui dispositivi mobili, mentre l'evento "onclick", in genere, è supportato.

Audio al click del mouse



Codice:
<div class="audio-container">
<img src="URLimmagine" border="0" onclick="play()">
<audio id="audio">
<source src="file.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="file.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>
</div>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();}
</script>


Se volete che l'audio si interrompa cliccando nuovamente sull'immagine, usate questo codice:
<div class="audio-container">
<img src="URLimmagine" border="0" onclick="play();" />
<audio id="audio">
<source src="file.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="file.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>
</div>
<script>
  function play() {
    var audio = document.getElementById("audio");
    if (playing === false) {
      audio.play();
      playing = true;
    } else {
      audio.pause();
      playing = false;
    }
  }
   var playing = false;
</script>

Più immagini audio nella medesima pagina

NOTA BENE: se volete aggiungere più immagini in una stessa pagina, dovete dare differenti ID ad ogni rispettivo codice, perchè ogni ID è univoco.
Esempio:

<div class="audio-container">

 <img onclick="play();" src="URLimmagine" />
 <audio id=audio>
<source src="file.mp3" type='audio/mpeg; codecs="mp3"'>
</audio>
<br>
<br>
<img onclick="play2();" src="URLimmagine" />
  <audio id=audio2>
<source src="file.mp3" type='audio/mpeg; codecs="mp3"'>
</audio>

</div>

<script>
  function play() {
    var audio = document.getElementById("audio");
    if (playing === false) {
      audio.play();
      playing = true;
    } else {
      audio.pause();
      playing = false;
    }
  }

function play2() {
    var audio2 = document.getElementById("audio2");
    if (playing === false) {
      audio2.play();
      playing = true;
    } else {
      audio2.pause();
      playing = false;
    }
  }
   var playing = false;

</script>

<br>
<br>
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: