-» -» Immagini con audio

Immagini con audio

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web
Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Audio al passaggio del mouse

audio onmouseover

NOTA: l'evento audio onmouseover potrebbe essere bloccato dal browser per impostazioni predefinita..
Per sbloccarlo ci sono metodi diversi secondo il browser utilizzato:
- Icona di blocco/sblocco sulla barra degli indirizzi.
- Click, o doppio click sull'immagine audio.
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

audio onclick


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>


Se volete cambiare il cursore del mouse sopra l'immagine, aggiungete questa regola di stile:
<style>
  .audio-container img:hover {
    cursor: pointer;
} 
</style>

Più immagini audio nella medesima pagina

È possibile aggiungere più immagini audio nella stessa pagina dando semplicemente un id univoco ad ogni tag audio e allo script corrispondente.
Maggiori funzionalità si possono ottenere con javascript, in questo modo.
L'audio si avvia cliccando su un'immagine e si interrompe cliccando nuovamente. Passando da una immagine alla successiva, l'audio dell'immagine precedente si interrompe automaticamente.
Per aggiungere altre immagini, attenzione a modificare i punti in rosso sostituendo i numeri in sequenza e modificando il totale delle immagini nello script.
Codice:
<div class="audio-container">
   <img onclick="aud_play_pause('1')" src="URLimmagine" />
   <audio id="1">
      <source src="file1.mp3" type='audio/mpeg; codecs="mp3"'>
   </audio>
   <br>
   <br>
   <img onclick="aud_play_pause('2')" src="URLimmagine" />
   <audio id="2">
      <source src="file2.mp3" type='audio/mpeg; codecs="mp3"'>
   </audio>
   <br>
   <br>
   <img onclick="aud_play_pause('3')" src="URLimmagine" />
   <audio id="3">
      <source src="file3.mp3" type='audio/mpeg; codecs="mp3"'>
   </audio>
</div>

<script>
   ids = new Array(3); // an array with total number of ids
   function aud_play_pause(idNumber) {
   var clickedAudio = document.getElementById(idNumber);
   
   for (var i = 0; i < ids.length; i++) {
   if ((i + 1) == idNumber && clickedAudio.currentTime == 0) { // if it's the current one and is not playing
     clickedAudio.play(); // start it
   } else { // either not the current one, or the current one but it is playing
     document.getElementById(i + 1).pause(); // Pause all ids before playing next file.
     document.getElementById(i + 1).currentTime = 0; // Set the time back to zero, else it will replay from the pause point.
   }
   }
   }
</script>

Immagine con audio player

Esempio:

Title 1

immagine con audio player
Codice:
 <style>
.audio-container {
position: relative;
max-width:400px;
width:100%;
margin:20px auto;
}
.audio-container img {
max-width:100%;
position:relative;
border: 0;
}
.audio-container audio{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  z-index:10;
  height: 25px;
}
.audio-title {
  position: absolute;
  left: 2%;
  font-family: 'arial', sans-serif;
  z-index: 10;
  font-size: 1.2rem;
  color: #fff;
}
</style>

<div class="audio-container">
<p class="audio-title"><span>Title</span></p>
<img src="URLimmagine">
<audio controls = 'controls'>
    <source src='file.mp3' type= 'audio/mp3'>
  </audio>
</div>

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con:

Leggi anche: Creare un sito da zero

Mappa del sito
Mappa del sito