Son au survol 3

Son au survol 3

J'ai déjà proposé un code de son au survol, qui est un code javascript, accepté, semble-t-il ! Survolez les textes en gras.

http://pourquoipas732.eklablog.com/son-au-survol-p1073670
http://pourquoipas732.eklablog.com/son-survol-2-p1075296

Ces pages proposent un son au survol d'une image mais, si on souhaite donner un peu de piment à un texte, on peut faire jouer un son au survol d'un mot.

Où trouver des sons courts car le but n'est pas de faire jouer une musique au survol d'un mot: les lecteurs MP3 sont là pour ça.

http://www.memoclic.com

http://www.universal-soundbank.com

Sur ces sites, clic droit sur le son et enregistrer la cible du lien dans votre dossier.

Il faut ensuite lui donner une adresse Ekla en l'hébergeant dans vos dossiers, pour en récupérer l'adresse:

Onglet contenu/gérer les fichiers/ Pour vous y retrouver, vous pouvez créer un nouveau dossier (en bas, à gauche), le nommer par exemple "sons" et rassembler dedans les divers sons à utiliser.

"Uploader un fichier" (charger un fichier) , depuis votre dossier/ouvrir; une fois hébergé, il apparaît sous forme d'une vignette, avec son identifiant dessous car, pour un son, pas d'image.

Pour récupérer son adresse: case URL: cliquez dessus pour sélectionner l'adresse/clic droit/copier puis ouvrir une feuille de bloc-note pour coller cette adresse, à placer dans le code.

Nous avons maintenant l'avantage que les fichiers MP3 soient lus par tous les navigateurs, ce qui nous évite des conversions.

Comme je prépare des pages sur un type de structure, vous pourrez faire jouer un son au survol d'un bouton ou d'un mot, si vous le souhaitez.

Le code de cette partie:

<a onmouseover="mouseoversound1.playclip()" onmouseout="mouseoversound1.pause()">Ces pages proposent un son au survol d'une image</a>...

<a onmouseover="mouseoversound2.playclip()" onmouseout="mouseoversound2.pause()">Pour récupérer son adresse:</a> ... 

<script>// <![CDATA[
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
var mouseoversound1=createsoundbite("http://ekladata.com/aPVq_up3TV1AO0BuSMYZZdG7ijU/340.mp3")
var clicksound1=createsoundbite("click_sound.ogg", "click_sound.mp3")
var mouseoversound2=createsoundbite("http://ekladata.com/kr37NUf_0vOhX7xnrUSLEeY0t1o/332.mp3")
var clicksound2=createsoundbite("click_sound.ogg", "click_sound.mp3")
// ]]></script>