Wikibooks

Kul med javascript/Spela upp ljud

< Kul med javascript


Javascript har numera stöd för ljud på ett helt annat sätt än tidigare. Kom bara ihåg att helst använda ljud av .wav-format om det är små snuttar eller ljudeffekter, då kan du inte misslyckas. Om det däremot är bakgrundsljud eller längre ljudsnuttar som skall spelas upp är det bättre med .mp3 eller .ogg formaten, fast de stöds litet olika bra beroende på vilken webläsare du använder.

Skall man spela upp ett ljud bör det kopplas till någon händelse, t.ex. när man trycker ner en tangent, klickar med musen eller när en varning visas. Om du tittar på koden här nedanför ser du två intressanta saker.

För det första laddas ljudet in med "preload". Det innebär att ljudet laddas in och finns i minnet så länge sidan finns framme. Det innebär att det går blixtsnabbt att spela upp ett kort ljud.

För det andra använder vi "clonenode" vilket i praktiken innebär att det går att spela samma ljud i flera "kanaler". Det kanske inte är så spännande just i det här exemplet men anta att du gör ett krigsspel där man skjuter mycket, då är det bra om explosionerna låter i kör, och inte avbryts när nästa ljud kommer, något som ger ett upphackat och stötigt intryck.

Enligt koden här nedanför så spelas ljudet upp så fort varningsfönstren öppnas. Pröva själv att stänga första fönstret innan ljudet slutat spela, så hör du att ett nytt, fast samma, ljud hörs i bakgrunden. 


<!doctype html>
<html>
<head>
<title>Spela upp ljud i HTML5</title>
<meta charset="utf-8">
</head>
<body>

<audio src="slap.wav" id="pling" preload>

<script>
document.getElementById("pling").cloneNode(true).play();
//http://www.talkingwav.com/various/slap.wav
//Varje gång du vill använda ljudet skriver du t.ex: 
alert("Ett pling hörs");
alert("Ett till pling hörs");
</script>

</body>
</html>

Spela upp en hel melodi

redigera

Anta då att du vill ha en spelare som spelar upp olika musikfiler. Du kanske vill skapa en digital jukebox? Då måste du ha en kod som fungerar oavsett läsare. Som tur är finns det en här som utnyttjar HTML5. Det enda du måste göra är att ha en musikfil som heter audio-file.mp3 och en annan musikfil som heter audio-file.ogg av mp3 respektive ogg format sparat i samma katalog som hemsidan med javascriptet för att det skall fungera. Om webläsaren inte klarar av att spela upp .mp3 filer så klarar den .ogg filer. På det sättet är du helgarderad och musiken kommer alltid att spelas upp oavsett vilken webläsare användaren har. Detta problem med olika filtyper beror på att Firefox och Opera inte har rätt att spela upp .mp3 filer pga. copyrightproblem men de användarna är så många att även de borde få höra musiken. Därför bör även en likadan låt av .ogg typ finnas med. 

<!doctype html>
<html>
<head>
<title>Spela upp ljud i HTML5</title>
<meta charset="utf-8">
</head>
<body>

<script>

<!-- HTML5 ljudkod som skall fungera oavsett läsare

// Inställningar för spelaren

var mp3snd 	= "audio-file.mp3";	// .mp3 fil
var oggsnd 	= "audio-file.ogg";	// .ogg fil

var audiowidth	= "300"			// Spelarens bredd
var borderw	= "2"			// Bredd på spelarens ram
var bordcolor	= "0066FF"		// Färg på spelarens ram
var loopsong	= "yes"			// Skall ljudet spelas om och om igen? 
                                      // yes = ja, no= spelas enbart en gång

// -----------------------------------------------
// Skapad av: Allwebco Design Corporation
// "No License is included. This script can be freely copied, distributed or sold"
// YOU DO NOT NEED TO EDIT BELOW THIS LINE
 // Källa: http://allwebco-templates.com/support/S_script_music.htm


  if (loopsong == "yes") {
var looping5="loop";
var loopingE="true";
	}
	else{
var looping5="";
var loopingE="false";
	}
document.write('<table style="border-collapse:collapse; border-spacing: 0; margin: 0; padding: 0; border: #'+bordcolor+' '+borderw+'px solid;background-color: #F0F0F0;"><tr><td style="vertical-align: middle; text-align: center; padding: 0;">');
document.write('<audio autoplay="autoplay" controls '+looping5+' style="width:'+audiowidth+'px;">');
document.write('<source src="'+mp3snd+'" type="audio/mpeg">');
document.write('<source src="'+oggsnd+'" type="audio/ogg">');
document.write('<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-mplayer2" width="'+audiowidth+'" height="45">');
document.write('<param name="filename" value="'+mp3snd+'">');
document.write('<param name="autostart" value="1">');
document.write('<param name="loop" value="'+loopingE+'">');
document.write('</object>');
document.write('</audio>');
document.write('</td></tr></table>');
// -->

</script>

</body>
</html>
Hämtad från ”https://sv.wikibooks.org/w/index.php?title=Kul_med_javascript/Spela_upp_ljud&oldid=49906”