Tutorial HTML5 Sound - onMouseover und onClick - gehe mit der Maus über die Links und die Navigation

Hier geht es zu dem Skript:

www.javascriptkit.com/script/script2/soundlink.shtml

Hier könnt Ihr Euch meine vier Sound Dateien downloaden. Downloads insgesamt seit dem 31.10.2012: 1924 

Entpackt die ZIP Datei und kopiert den Ordner “sound” in das Stammverzeichnis der lokalen Publizierung und auf dem Server.

Zunächst kopiert Ihr Euch dieses Skript in die HTML des Layouts.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

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")}}
   }
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("./sound/beep.ogg", "./sound/beep.mp3")
var clicksound=createsoundbite("./sound/click.ogg", "./sound/click.mp3")

</script>

... achtet dabei auf die korrekte relative Pfadangabe zu den Sound Dateien. Oben im Skript von der “Home” (Startseite) nur mit einem Punkt. Von einer Unterseite, die sich im Verzeichnis “html” befindet, gehören dort zwei Punkte hin ../ (gehe ein Verzeichnis höher).

Nun verlinkt Ihr Euren Text ganz normal und fügt dann “im Tag” die Anweisung unten ein.

> im Link Fenster unten auf den Button “HTML” klicken > “im Tag” (ab NOF 11 “innen”) einfügen

Für den onClick Sound:

onClick="clicksound.playclip()"

oder für den onMouseover Sound:

onMouseover="mouseoversound.playclip()"

Wer das auch für die Navigationsleiste (so wie ich hier) machen möchte, der muss sich einzelne Bilder für die Navigation erstellen, so wie ich es hier beschreibe.

Diese Bilder werden dann auch wieder einzeln verlinkt und “im Tag” mit der onMouseover Anweisung versehen.

Beispiel onMouseover meines Buttons “ButtonHome” zur Startseite

onMouseover="mouseoversound.playclip();ButtonHome.src='./assets/images/HTML5-Sound_Over.jpg'" onMouseout="ButtonHome.src='./assets/images/HTML5-Sound_Highlighted.jpg'"

Bemerkung:

• HTML5 funktioniert nicht in allen Browsern wie z.B. dem IE8. Getestet mit IE9+, FF3.5+, Chrome/Safari 3+, Opera 10.5+
   
• Hier ein Online-Converter mit dem Ihr die .ogg Datei erstellen könnt: www.coolutils.com/Online/Audio-Converter/

nach oben