Immagini con audio


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

Audio al passaggio del mouse




Codice:
<!DOCTYPE html>
<html>
<head>
    <title>Audio Hover</title>
</head>
<body>    
<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>
<script>
var hoverArea = document.getElementById('hoverElement');
var audio = document.getElementById('audio');
hoverArea.onmouseover= function(){
audio.play();
}
hoverArea.onmouseout= function(){
audio.pause();
}    
</script>
</body>    
</html>

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" non e` sempre supportato dai browser dei dispositivi mobili, mentre l'evento "onclick", in genere, e` supportato.

Audio al click del mouse



Codice:
<!DOCTYPE html>
<html>
<head>
<title>Audio Onclick</title>
</head>
<body>
<img src="URLimmagine" border="0" value="PLAY"  onclick="play()">
<audio id=audio >
<source src="file.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="file.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
</body>
</html>







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti