Lyd

Du kan legge til lyd og musikk på nettsiden med <audio>-taggen.

Grunnleggende lyd

<audio src="musikk.mp3" controls></audio>

src - stien til lydfilen
controls - viser avspillingskontroller

Attributter

Attributt	Beskrivelse
`src`	Stien til lydfilen
`controls`	Vis avspillingskontroller
`autoplay`	Start automatisk
`loop`	Gjenta i loop
`muted`	Lydløs

Kontroller

controls gir brukeren:

Play/pause-knapp
Tidslinje
Volumkontroll

<audio src="sang.mp3" controls></audio>

Alltid bruk controls

Uten controls ser ikke brukeren lydspilleren og kan ikke starte lyden!

Loop

Gjenta lyden i det uendelige:

<audio src="bakgrunnsmusikk.mp3" controls loop></audio>

Autoplay

Starter lyden automatisk:

<audio src="intro.mp3" autoplay></audio>

Unngå autoplay

De fleste nettlesere blokkerer autoplay med lyd. Det er også irriterende for brukere!

Flere formater

Nettlesere støtter ulike lydformater. Tilby flere:

<audio controls>
    <source src="musikk.mp3" type="audio/mpeg">
    <source src="musikk.ogg" type="audio/ogg">
    Nettleseren din støtter ikke lyd.
</audio>

Nettleseren velger første format den støtter.

Vanlige formater

Format	Filtype	Type
MP3	`.mp3`	`audio/mpeg`
Ogg	`.ogg`	`audio/ogg`
WAV	`.wav`	`audio/wav`

MP3 fungerer overalt

MP3 støttes av alle moderne nettlesere.

Spotify og SoundCloud

For musikk fra streamingtjenester, bruk embed-kode fra tjenesten:

Spotify

<iframe
    src="https://open.spotify.com/embed/track/TRACK_ID"
    width="300"
    height="80"
    allowfullscreen>
</iframe>

SoundCloud

<iframe
    width="100%"
    height="166"
    src="https://w.soundcloud.com/player/?url=TRACK_URL">
</iframe>

Eksempel

<!DOCTYPE html>
<html lang="no">
<head>
    <title>Min musikk</title>
</head>
<body>
    <h1>Musikksamling</h1>

    <h2>Sang 1</h2>
    <p>En fin melodi</p>
    <audio src="audio/sang1.mp3" controls></audio>

    <h2>Sang 2</h2>
    <p>En annen fin melodi</p>
    <audio src="audio/sang2.mp3" controls></audio>

    <h2>Lydeffekter</h2>
    <p>Applaus</p>
    <audio src="audio/applaus.mp3" controls></audio>
</body>
</html>

Enkel musikkspiller

<div style="background: #f0f0f0; padding: 20px; border-radius: 10px;">
    <h3>Nå spilles:</h3>
    <p>Artist - Sangtittel</p>
    <audio src="sang.mp3" controls style="width: 100%;"></audio>
</div>

Oppsummering

<audio src="lyd.mp3" controls></audio>

Attributt	Gjør
`controls`	Vis kontroller
`autoplay`	Start automatisk
`loop`	Gjenta
`muted`	Lydløs

Lydformater

Bruk MP3 for best kompatibilitet.