JavaScript — Introduktion genom exempel

5.3 Media (ljud och video)

Rubriken säger ljud och video, men i exemplen illustreras det endast med ljud. Video kan sedan hanteras på liknande sätt. Detta exempel är uppdelat i två delar:

1. Ett antal ljud läses in i varsitt Audio-objekt och används som ljudeffekter, då man klickar på några element.
2. Här används flera tekniker. Timers för nedräkning och animering samt ljud för musik och ljudeffekt.

Sammanfattning

• Ett objekt för ett ljud skapas med s = new Audio(url), där url är en adress till den ljudfil man vill läsa in.
• Vill man också visa ljudets kontrollpanel på sidan, får man istället ta in ljudfilen som ett audio-element i HTML-koden. Sedan kan man i JavaScript ta fram en referens till elementet med querySelector() och använda elementet på samma sätt som ett Audio-objekt.
• Med s.currentTime får man fram hur långt ljudet spelat i sekunder. Man kan också lägga in ett värde, för att "hoppa dit" i ljudet.
• Egenskapen s.loop sätts till true eller false, för att styra om ljudet ska upprepas i en loop eller ej.
• Egenskapen s.paused är true eller false beroende på om ljudet pausats eller ej. Man kan endast läsa denna egenskap. För att pausa ett ljud använder man nedanstående metod.
• Med s.pause() stoppar man uppspelningen av ljudet.
• Med s.play() startar man uppspelningen av ljudet.

Egna övningar

Det finns inga specifika övningar på detta områden. Men studera koden i exemplen och experimentera med den på egen hand.