Audio med undertekst

Kategorier: Multimediedesign

Sådan kan du lægge tekst under en audio-fil i WordPress med HTML, CSS og JavaScript via blokken “Tilpasset HTML”.

Tekstning af lydfiler kan være nødvendigt for at hjælpe personer med hørenedsættelse.

Ekspemplet gør det let at navigere, fx hvis der er tale om en længere lydfil.

Rå HTML

wordpress-tekstet-lyd Rå kode

Husk, at linke til audio-filen, når koden genbruges. Koden kan med fordel redigeres i en editor, som Visual Studio Code, Atom eller Nano.

Koden er udviklet med Claude AI.

Koden "hver for sig"

Blokken "Tilpasset HTML" giver mulighed for at lægge kode under separate faneblade:

HTML under fanebladet HTML
CSS under fanebladet CSS
JavaScript under fanebladet JavaScript

Sådan tekster du

Læg de ønskede tekster ind i objektet, der ser sådan ud:

var TEKSTER = {
    telecaster: `WEBVTT

00:00:00.000 --> 00:00:03.000
Hej og velkommen til denne optagelse.

00:00:03.000 --> 00:00:07.000
Teksterne her vises synkront med lyden.

00:00:07.000 --> 00:00:11.000
Klik på en linje nedenfor for at springe dertil.
`
  };

Denne linje viser, hvornår og hvor længe teksten skal vises:

00:00:07.000 --> 00:00:11.000

Linjen nedenunder er den tekst som skal vises:

Klik på en linje nedenfor for at springe dertil.

Kategorier: Multimediedesign