<audio> — HTML element uitgelegd

Attributen

De attributen van dit element omvatten de globale attributen.

`autoplay`	Een booleaans attribuut: indien opgegeven, begint de audio automatisch met afspelen zodra dat kan, zonder te wachten tot het gehele audiobestand is gedownload. Opmerking Sites die automatisch audio afspelen (of video's met een audiospoor) kunnen een onprettige ervaring voor gebruikers opleveren, dus dit moet zo veel mogelijk worden vermeden. Als u toch autoplay-functionaliteit moet aanbieden, moet u dit opt-in maken (waarbij een gebruiker het specifiek moet inschakelen). Dit kan echter nuttig zijn bij het maken van media-elementen waarvan de bron op een later moment onder gebruikerscontrole wordt ingesteld. Zie onze autoplay-gids voor meer informatie over het correct gebruiken van autoplay. Opmerking Audio met het `loading="lazy"`-attribuut ingesteld begint pas te downloaden en automatisch af te spelen wanneer de bediening van de media zich nabij of binnen de viewport bevindt. Lazy geladen audio zonder het `controls`-attribuut speelt niet automatisch af.
`controls`	Als dit attribuut aanwezig is, biedt de browser bedieningselementen aan waarmee de gebruiker het afspelen van audio kan regelen, inclusief volume, doorzoeken en pauzeren/hervatten van het afspelen.
`controlslist`	Het `controlslist`-attribuut helpt, indien opgegeven, de browser bij het bepalen welke bedieningselementen te tonen voor het `audio`-element wanneer de browser zijn eigen set bedieningselementen toont (dat wil zeggen, wanneer het `controls`-attribuut is opgegeven). De toegestane waarden zijn `nodownload`, `nofullscreen` en `noremoteplayback`.
`crossorigin`	Dit opgesomde attribuut geeft aan of CORS moet worden gebruikt om het bijbehorende audiobestand op te halen. CORS-ingeschakelde bronnen kunnen worden hergebruikt in het `<canvas>`-element zonder tainted (besmet) te raken. De toegestane waarden zijn: `anonymous` : Verstuurt een cross-origin-verzoek zonder credentials. Met andere woorden, het verstuurt de `Origin:`-HTTP-header zonder cookie, X.509-certificaat, of het uitvoeren van HTTP Basic-authenticatie. Als de server geen credentials aan de oorspronkelijke site geeft (door de `Access-Control-Allow-Origin:`-HTTP-header niet in te stellen), raakt de bron tainted en wordt het gebruik ervan beperkt. `use-credentials` : Verstuurt een cross-origin-verzoek met credentials. Met andere woorden, het verstuurt de `Origin:`-HTTP-header met een cookie, een certificaat, of het uitvoeren van HTTP Basic-authenticatie. Als de server geen credentials aan de oorspronkelijke site geeft (via de `Access-Control-Allow-Credentials:`-HTTP-header), raakt de bron tainted en wordt het gebruik ervan beperkt. Wanneer niet aanwezig, wordt de bron opgehaald zonder CORS-verzoek (dat wil zeggen zonder de `Origin:`-HTTP-header te versturen), waardoor niet-tainted gebruik in `<canvas>`-elementen wordt voorkomen. Indien ongeldig, wordt het behandeld alsof het opgesomde sleutelwoord anonymous werd gebruikt. Zie CORS-instellingsattributen voor meer informatie.
`disableremoteplayback`	Een booleaans attribuut dat wordt gebruikt om de mogelijkheid van remote playback uit te schakelen op apparaten die zijn aangesloten via bekabelde (HDMI, DVI, enz.) en draadloze technologieën (Miracast, Chromecast, DLNA, AirPlay, enz.). Zie de voorgestelde Remote Playback API-specificatie voor meer informatie. In Safari kunt u `x-webkit-airplay="deny"` als terugval gebruiken.
`loading` Experimenteel	Geeft aan hoe de browser de audio moet laden: `eager` : Laadt de audio onmiddellijk, ongeacht of de audio zich momenteel binnen de zichtbare viewport bevindt (dit is de standaardwaarde). `lazy` : Stelt het laden van de audio uit totdat de bediening een door de browser berekende afstand tot de viewport bereikt. Opmerking Om audio-elementen zichtbaar te laten overlappen met de viewport, moeten ze zichtbaar zijn. Browsers gebruiken het `controls`-attribuut om audio-elementen zichtbaar te maken, dus dit is nodig voor lazy loading. Lazy geladen audio zonder het `controls`-attribuut wordt niet geladen. Lazy loading voorkomt het netwerk- en opslagbandbreedtegebruik dat nodig is om de audio te verwerken totdat redelijk zeker is dat deze nodig zal zijn. Dit verbetert de prestaties in de meeste typische gebruiksscenario's. Lazy geladen audio die zich in de visuele viewport bevindt, is mogelijk nog niet gedownload wanneer de `load`-gebeurtenis van het Window wordt geactiveerd. Dit komt doordat de gebeurtenis alleen wordt geactiveerd op basis van eager geladen audio — lazy geladen audio wordt niet meegerekend, zelfs niet als deze zich binnen de visuele viewport bevindt bij het initieel laden van de pagina. Laden wordt alleen uitgesteld wanneer JavaScript is ingeschakeld. Dit is een anti-tracking-maatregel, omdat als een user agent lazy loading zou ondersteunen wanneer scripting is uitgeschakeld, het nog steeds mogelijk zou zijn voor een site om de geschatte scrollpositie van een gebruiker gedurende een sessie te volgen, door strategisch audio in de markup van een pagina te plaatsen zodat een server kan bijhouden hoeveel audioverzoeken worden gedaan en wanneer. Opmerking Het `loading="lazy"`-attribuut heeft ook invloed op het `autoplay`-attribuut, zoals beschreven in dat gedeelte van deze pagina.
`loop`	Een booleaans attribuut: indien opgegeven, zoekt de audiospeler automatisch terug naar het begin zodra het einde van de audio is bereikt.
`muted`	Een booleaans attribuut dat de standaard demp-instelling van de audio aangeeft. Indien ingesteld, wordt de audio in eerste instantie gedempt. De standaardwaarde is `false`, wat betekent dat de audio te horen zal zijn wanneer deze wordt afgespeeld. Opmerking Om te dempen ongedaan te maken, werkt het instellen van `muted="false"` niet; de audio blijft gedempt zolang het attribuut aanwezig is. Om het dempen ongedaan te maken, moet het attribuut volledig worden verwijderd.
`preload`	Dit enumerated-attribuut is bedoeld om de browser een hint te geven over wat volgens de auteur zal leiden tot de beste gebruikerservaring. Het kan een van de volgende waarden hebben: `none`: Geeft aan dat de audio niet vooraf geladen moet worden. `metadata`: Geeft aan dat alleen audiometadata (bijv. lengte) wordt opgehaald. `auto`: Geeft aan dat het volledige audiobestand kan worden gedownload, zelfs als niet wordt verwacht dat de gebruiker het gebruikt. lege string: Een synoniem van de waarde `auto`. De standaardwaarde verschilt per browser. De specificatie adviseert deze in te stellen op `metadata`. Opmerking Audio met het `loading="lazy"`-attribuut ingesteld past het `preload`-gedrag pas toe zodra de audiobediening zich nabij of binnen de viewport bevindt. Het `autoplay`-attribuut heeft voorrang boven `preload`. Als `autoplay` is opgegeven, moet de browser uiteraard beginnen met het downloaden van de audio voor afspelen. De browser is door de specificatie niet verplicht de waarde van dit attribuut te volgen; het is slechts een hint.
`src`	De URL van de in te sluiten audio. Dit is onderhevig aan HTTP-toegangscontroles. Dit is optioneel; u kunt in plaats daarvan het `<source>`-element binnen het audioblok gebruiken om de in te sluiten audio op te geven.

Events

`audioprocess` Verouderd	De invoerbuffer van een `ScriptProcessorNode` is klaar om verwerkt te worden.
`canplay`	De browser kan de media afspelen, maar schat in dat er niet genoeg data is geladen om de media tot het einde af te spelen zonder te moeten stoppen voor verdere buffering van inhoud.
`canplaythrough`	De browser schat in dat hij de media tot het einde kan afspelen zonder te stoppen voor het bufferen van inhoud.
`complete`	Het renderen van een `OfflineAudioContext` is beëindigd.
`durationchange`	Het `duration`-attribuut is bijgewerkt.
`emptied`	De media is leeg geworden; deze gebeurtenis wordt bijvoorbeeld verstuurd als de media al (gedeeltelijk) is geladen, en de `HTMLMediaElement.load`-methode wordt aangeroepen om deze opnieuw te laden.
`ended`	Het afspelen is gestopt omdat het einde van de media is bereikt.
`loadeddata`	Het eerste frame van de media is klaar met laden.
`loadedmetadata`	De metadata is geladen.
`loadstart`	Wordt geactiveerd wanneer de browser is begonnen met het laden van de bron.
`pause`	Het afspelen is gepauzeerd.
`play`	Het afspelen is begonnen.
`playing`	Het afspelen is klaar om te beginnen na te zijn gepauzeerd of vertraagd door gebrek aan data.
`ratechange`	De afspeelsnelheid is gewijzigd.
`seeked`	Een seek-bewerking is voltooid.
`seeking`	Een seek-bewerking is begonnen.
`stalled`	De user agent probeert mediadata op te halen, maar de data komt onverwacht niet binnen.
`suspend`	Het laden van mediadata is opgeschort.
`timeupdate`	De tijd aangegeven door het `currentTime`-attribuut is bijgewerkt.
`volumechange`	Het volume is gewijzigd.
`waiting`	Het afspelen is gestopt vanwege een tijdelijk gebrek aan data.

Gebruiksnotities

Niet alle browsers ondersteunen dezelfde bestandstypen en audiocodecs; u kunt meerdere bronnen opgeven binnen geneste <source>-elementen, en de browser gebruikt dan de eerste die hij begrijpt:

HTML

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3" download="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

De audiobron kan worden ingesteld op elke geldige URL, inclusief HTTP(S)-URL's en Data-URL's. Bij gebruik van HTTP(S)-URL's dient u zich ervan bewust te zijn dat het cachegedrag van de browser van invloed is op hoe vaak het bestand van de server wordt opgevraagd. Data-URL's sluiten de audiodata direct in de HTML in, wat handig kan zijn voor kleine audiobestanden, maar wordt niet aanbevolen voor grotere bestanden omdat dit de omvang van het HTML-bestand vergroot.

Bij gebruik van <source>-elementen probeert de browser elke bron achtereenvolgens te laden. Als een bron mislukt (bijv. door een ongeldige URL of niet-ondersteund formaat), wordt de volgende bron geprobeerd, enzovoort. Een error-gebeurtenis wordt geactiveerd op het <audio>-element nadat alle bronnen zijn mislukt; error-gebeurtenissen worden niet geactiveerd op elk afzonderlijk <source>-element.

U kunt ook de Web Audio API gebruiken om audiostromen direct vanuit JavaScript-code te genereren en te manipuleren, in plaats van vooraf bestaande audiobestanden te streamen. U kunt de srcObject in JavaScript instellen op een MediaStream-object. Dit wordt vaak gebruikt voor live-audiostreams of realtime audioverwerking.

const audioElement = document.querySelector("audio");
navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    audioElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing the microphone", error);
  });

Merk op dat MediaStream-bronnen beperkingen hebben: ze zijn niet doorzoekbaar en ondersteunen slechts een beperkte set codecs.

Wij bieden een uitgebreide en grondige gids voor mediabestandstypen en de audiocodecs die daarbinnen kunnen worden gebruikt. Ook beschikbaar is een gids voor de codecs die worden ondersteund voor video.

Overige gebruiksnotities:

Als u het controls-attribuut niet opgeeft, bevat de audiospeler niet de standaardbediening van de browser. U kunt echter uw eigen aangepaste bediening maken met JavaScript en de HTMLMediaElement-API.
Om nauwkeurige controle over uw audio-inhoud mogelijk te maken, activeren HTMLMediaElements veel verschillende gebeurtenissen. Dit biedt ook een manier om het ophaalproces van de audio te monitoren, zodat u kunt letten op fouten of kunt detecteren wanneer er genoeg beschikbaar is om te beginnen met afspelen of manipuleren.
Aan <audio>-elementen kunnen geen ondertitels of bijschriften worden gekoppeld op dezelfde manier als bij <video>-elementen. Zie WebVTT and Audio van Ian Devlin voor nuttige informatie en workarounds.
Om de terugvalinhoud te testen op browsers die het element ondersteunen, kunt u <audio> vervangen door een niet-bestaand element zoals <notanaudio>.

Een goede algemene bron voor informatie over het gebruik van HTML <audio> is de beginnerstutorial HTML video and audio.

Stylen met CSS

Het <audio>-element heeft geen intrinsieke visuele uitvoer, tenzij het controls-attribuut is opgegeven; in dat geval wordt de standaardbediening van de browser getoond.

De standaardbediening heeft standaard een display-waarde van inline, en het is vaak een goed idee om de waarde in te stellen op block om meer controle te krijgen over positionering en layout, tenzij u wilt dat het binnen een tekstblok of iets dergelijks past.

U kunt de standaardbediening stylen met eigenschappen die het blok als één geheel beïnvloeden, dus u kunt het bijvoorbeeld een border en border-radius, padding, margin, enz. geven. U kunt echter niet de afzonderlijke onderdelen binnen de audiospeler stylen (bijv. de knopgrootte of pictogrammen wijzigen, het lettertype wijzigen, enz.), en de bediening verschilt per browser.

Om een consistente uitstraling tussen browsers te krijgen, moet u aangepaste bedieningselementen maken; deze kunnen worden opgemaakt en gestyled zoals u zelf wilt, en vervolgens kan JavaScript samen met de HTMLMediaElement-API worden gebruikt om hun functionaliteit te koppelen.

Basisprincipes van videospelerstyling biedt enkele nuttige stylingtechnieken — het is geschreven in de context van <video>, maar veel ervan is even goed toepasbaar op <audio>.

Detecteren van toevoeging en verwijdering van sporen

U kunt detecteren wanneer sporen worden toegevoegd aan of verwijderd uit een <audio>-element met behulp van de addtrack- en removetrack-gebeurtenissen. Deze gebeurtenissen worden echter niet direct naar het <audio>-element zelf verstuurd. In plaats daarvan worden ze verstuurd naar het spoorlijst-object binnen de HTMLMediaElement van het <audio>-element dat overeenkomt met het type spoor dat aan het element werd toegevoegd:

`HTMLMediaElement.audioTracks`	Een `AudioTrackList` met alle audiosporen van het media-element. U kunt een listener voor `addtrack` aan dit object toevoegen om gewaarschuwd te worden wanneer nieuwe audiosporen aan het element worden toegevoegd.
`HTMLMediaElement.videoTracks`	Voeg een `addtrack`-listener toe aan dit `VideoTrackList`-object om geïnformeerd te worden wanneer videosporen aan het element worden toegevoegd.
`HTMLMediaElement.textTracks`	Voeg een `addtrack`-gebeurtenislistener toe aan deze `TextTrackList` om op de hoogte te worden gebracht wanneer nieuwe tekstsporen aan het element worden toegevoegd.

Opmerking

Ook al is het een <audio>-element, het heeft toch video- en tekstspoorlijsten, en kan in feite worden gebruikt om video weer te geven, hoewel de gebruikersinterface-implicaties vreemd kunnen zijn.

Om bijvoorbeeld te detecteren wanneer audiosporen worden toegevoegd aan of verwijderd uit een <audio>-element, kunt u code als deze gebruiken:

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Deze code houdt in de gaten wanneer audiosporen worden toegevoegd aan of verwijderd uit het element, en roept een hypothetische functie aan op een trackeditor om het spoor te registreren en te verwijderen uit de lijst met beschikbare sporen van de editor.

U kunt ook addEventListener() gebruiken om te luisteren naar de addtrack- en removetrack-gebeurtenissen.

Toegankelijkheid

Audio met gesproken dialoog moet zowel bijschriften als transcripten bevatten die de inhoud nauwkeurig beschrijven. Bijschriften, die worden opgegeven met WebVTT, stellen mensen met een gehoorbeperking in staat de inhoud van een audio-opname te begrijpen terwijl de opname wordt afgespeeld, terwijl transcripten mensen die extra tijd nodig hebben in staat stellen de inhoud van de opname te bekijken in een tempo en formaat dat voor hen comfortabel is.

Als automatische ondertitelingsdiensten worden gebruikt, is het belangrijk de gegenereerde inhoud te controleren om ervoor te zorgen dat deze de brontaal nauwkeurig weergeeft.

Het <audio>-element ondersteunt WebVTT niet rechtstreeks. U zult een bibliotheek of framework moeten vinden dat deze mogelijkheid voor u biedt, of zelf code moeten schrijven om bijschriften weer te geven. Een optie is om uw audio af te spelen met een <video>-element, dat wel WebVTT ondersteunt.

Naast gesproken dialoog moeten ondertitels en transcripten ook muziek en geluidseffecten identificeren die belangrijke informatie communiceren. Dit omvat emotie en toon. Zie bijvoorbeeld in de onderstaande WebVTT het gebruik van vierkante haken om de kijker inzicht te geven in toon en emotie; dit kan helpen de sfeer vast te stellen die anders zou worden overgebracht met muziek, non-verbale geluiden en cruciale geluidseffecten, enzovoort.

PLAIN

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

Het is ook goede praktijk om wat inhoud (zoals de directe downloadlink) aan te bieden als terugval voor kijkers die een browser gebruiken waarin het <audio>-element niet wordt ondersteund:

HTML

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

Voorbeelden

Basisgebruik

Het volgende voorbeeld toont het basisgebruik van het <audio>-element om een OGG-bestand af te spelen. Het speelt automatisch af dankzij het autoplay-attribuut — als de pagina hiervoor toestemming heeft — en bevat ook terugvalinhoud.

HTML

<!-- Basic audio playback -->
<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>

Zie onze autoplay-gids voor details over wanneer autoplay werkt, hoe u toestemming krijgt om autoplay te gebruiken, en hoe en wanneer het gepast is om autoplay te gebruiken.

<audio>-element met <source>-element

Dit voorbeeld specificeert welk audiospoor moet worden ingesloten met behulp van het src-attribuut op een genest <source>-element in plaats van rechtstreeks op het <audio>-element. Het is altijd nuttig om het MIME-type van het bestand op te nemen in het type-attribuut, aangezien de browser dan direct kan bepalen of hij dat bestand kan afspelen, en er geen tijd aan verspilt als dat niet zo is.

HTML

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav" download="foo.wav">Download WAV audio</a>.
</audio>

<audio> met meerdere <source>-elementen

Dit voorbeeld bevat meerdere <source>-elementen. De browser probeert het eerste source-element (Opus) te laden als hij dat kan afspelen; zo niet, dan valt hij terug op het tweede (Vorbis) en uiteindelijk op MP3:

HTML

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>

Technische samenvatting

Content categories	Flow content, phrasing content, embedded content. If it has a `controls` attribute: interactive content and palpable content.
Permitted content	If the element has a `src` attribute: zero or more `<track>` elements followed by transparent content that contains no `<audio>` or `<video>` media elements. Else: zero or more `<source>` elements followed by zero or more `<track>` elements followed by transparent content that contains no `<audio>` or `<video>` media elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts embedded content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	`application`
DOM interface	`HTMLAudioElement`

Het element `<audio>`

Attributen

Events

Gebruiksnotities

Stylen met CSS

Detecteren van toevoeging en verwijdering van sporen

Toegankelijkheid

Voorbeelden

Basisgebruik

<audio>-element met <source>-element

<audio> met meerdere <source>-elementen

Technische samenvatting

Zie ook

Verwante elementen

Het element <audio>

Attributen

Events

Gebruiksnotities

Stylen met CSS

Detecteren van toevoeging en verwijdering van sporen

Toegankelijkheid

Voorbeelden

Basisgebruik

<audio>-element met <source>-element

<audio> met meerdere <source>-elementen

Technische samenvatting

Zie ook

Verwante elementen

Het element `<audio>`