Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.
Audio al passaggio del mouse
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:
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.
È 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:
<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>