<audio> - JavaScript

JavaScript kan styre <audio> så man kan lave sin egen afspiller uden at bruger controls attributten der giver forskellige knapper i forskellige browsere

Introduktion

Ved at undlade at bruge controls attributten i <audio> så skjules standard afspilleren.

Så kan man med lave sin egen afspiller og brug JavaScript til at styre <audio>.

Så behøver man ikke bruge browserens standard afspiller som har forskelligt udseende fra browser til browser.

Knapper

Ved at tilføje et id til hver afspiller som <audio id="musik1"> kan man fra JavaScript vælge den afspiller man vil kommunikere med ved at skrive document.getElementById('musik1').
Resultatet ovenfor er skabt af følgende kode

Flotte knapper

Med lidt billeder og CSS kan vi få nogen flotte knapper.
Resultatet ovenfor er skabt af følgende kode

Vis og skjul controls

Her er noget kode så man kan vise og skjule standard afspilleren.
Resultatet ovenfor er skabt af følgende kode

Safari 5.1.5 og Chrome 18 vil ikke umiddelbart vise controls når man trykker på "Vis controls" knappen og <audio> er startet uden controls. Men flytter man markøren (musen) udenfor hvor hjemmesiden én gang (for eksempel op til adressefeltet i browseren) så vises afspilleren og kan derefter skjules og vises almindeligt.

Safari 5.1.5 og Chrome 18 vil gerne både skjule og vise controls hvis <audio> er startet med controls.

Lydstyrke

Som standard er lydstyrken for <audio> sat til 1.0 hvilket betyder 100%, altså højeste lydniveau.

Det kan godt være ubehageligt for brugeren hvis lyden er høj fra starten så derfor kan det være en god ide og skrue lydstyrken ned inden afspilningen starter. Så kan brugeren selv skrue op til det ønskede niveau hvis det er for lavt.

Her sættes lydstyrken til 30%.

Lydstyrke knapper

Her laves nogle knapper så brugeren selv kan vælge lydstyrken.
Lydstyrke :
Resultatet ovenfor er skabt af følgende kode

Tid

Her er noget kode der viser hvor langt afspilningen er nået og hvor lang lydfilen er.
Aktuel tid : sekunder
Total længde : sekunder
Resultatet ovenfor er skabt af følgende kode

Status

Her er noget kode der viser om der afspilles, pauses, søges eller om slutningen er nået.
Status :
Resultatet ovenfor er skabt af følgende kode

Midlertidig kommentar

I Firefox 25.0 ser alt sammen ud til at virker godt.

I både Opera 17.0, Safari 5.1.7, Chrome 30 og Internet Explorer 10 bliver der ved med at stå "Status : Søger..." efter man har søgt og sluppet knappen.

I alle browserne står der dog også "Søger..." når den er på pause og man hiver i søgeren og giver slip.
Så skal man trykke på start/pause knappen før der kommer til at stå noget andet.

Forskellige måder at indlæse og afspille

Her ses flere forskellige måder at indlæse og afspille en lydfil på i JavaScript.



Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.