HTML Audio

Er zijn veel manieren om audio af te spelen in HTML.

Problemen, problemen en oplossingen

Het is niet gemakkelijk om audio in HTML af te spelen!

U moet veel vaardigheden beheersen om ervoor te zorgen dat uw audiobestanden afspelen in alle browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) en op alle hardware (PC, Mac, iPad, iPhone).

In dit hoofdstuk heeft CodeW3C.com de problemen en oplossingen voor u samengevat.

Gebruik plug-ins

Een browserplugin is een klein computerprogramma dat de standaardfuncties van een browser uitbreidt.

Plug-ins hebben veel toepassingen: het afspelen van muziek, het weergeven van kaarten, het verifiëren van bankrekeningen, het controleren van invoer, enz.

Je kunt de <object> of <embed>-tags gebruiken om plug-ins toe te voegen aan een HTML-pagina.

Deze tags definiëren containers voor bronnen (meestal niet-HTML-bronnen), die afhankelijk van het type, zowel door de browser als door externe plug-ins worden weergegeven.

Gebruik het <embed>-element

<embed>-tag definieert een container voor externe (niet-HTML) inhoud. (Dit is een HTML5-tag, ongeldig in HTML4, maar werkt in alle browsers).

Het volgende codefragment kan een MP3-bestand weergeven dat is ingebed in een webpagina:

Voorbeeld

<embed height="100" width="100" src="song.mp3" />

Probeer het zelf uit

Vraag:

  • <embed>-tag is ongeldig in HTML 4. De pagina kan niet worden geverifieerd met HTML 4.
  • Verschillende browsers ondersteunen audiobestandstypes verschillend.
  • Als de browser het bestandstype niet ondersteunt, kan de audio niet worden afgespeeld zonder plug-in.
  • Als de gebruikersengineer de plug-in niet heeft geïnstalleerd, kan de audio niet worden afgespeeld.
  • Als het bestand niet wordt geconverteerd naar een ander formaat, kan het ook niet in alle browsers worden afgespeeld.

Opmerking:Gebruik <!DOCTYPE html> (HTML5) om validatieproblemen op te lossen.

Gebruik het <object>-element

<object tag>-tag kan ook een container voor externe (niet-HTML) inhoud definiëren.

Het volgende codefragment kan een MP3-bestand weergeven dat is ingebed in een webpagina:

Voorbeeld

<object height="100" width="100" data="song.mp3"></object>

Probeer het zelf uit

Vraag:

  • Verschillende browsers ondersteunen audiobestandstypes verschillend.
  • Als de browser het bestandstype niet ondersteunt, kan de audio niet worden afgespeeld zonder plug-in.
  • Als de gebruikersengineer de plug-in niet heeft geïnstalleerd, kan de audio niet worden afgespeeld.
  • Als het bestand niet wordt geconverteerd naar een ander formaat, kan het ook niet in alle browsers worden afgespeeld.

Gebruik het HTML5 <audio>-element

<audio>-element is een HTML5-element, ongeldig in HTML 4, maar werkt in alle browsers.

Voorbeeld

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Je browser ondersteunt dit audiobestandstype niet.
</audio>

Probeer het zelf uit

Het bovenstaande voorbeeld gebruikt een mp3-bestand, zodat het in Internet Explorer, Chrome en Safari werkt.

Om ervoor te zorgen dat dit audio-bestand ook in Firefox en Opera werkt, is een ogg-bestand toegevoegd. Als dit mislukt, wordt een foutbericht weergegeven.

Vraag:

  • <audio>-tag is ongeldig in HTML 4. Je pagina kan niet worden geverifieerd met HTML 4.
  • Je moet de audiobestanden omzetten naar een ander formaat.
  • <audio>-element werkt niet in oude browsers.

Opmerking:Gebruik <!DOCTYPE html> (HTML5) om validatieproblemen op te lossen.

Beste HTML-oplossing

Voorbeeld

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Probeer het zelf uit

Het bovenstaande voorbeeld gebruikt twee verschillende audioformaten. De HTML5 <audio>-element probeert audio af te spelen in mp3 of ogg. Als dat mislukt, probeert de code de <embed>-element.

Vraag:

  • U moet de audio converteren naar een ander formaat.
  • Het <audio>-element kan niet worden gevalideerd met HTML 4 en XHTML.
  • Het <embed>-element kan niet worden gevalideerd met HTML 4 en XHTML.
  • Het <embed>-element kan geen foutmeldingen weergeven.

Opmerking:Gebruik <!DOCTYPE html> (HTML5) om validatieproblemen op te lossen.

De eenvoudigste manier om audio aan een website toe te voegen

Wat is de eenvoudigste manier om audio aan een webpagina toe te voegen?

Yahoo's media speler hoort absoluut bij de beste.

Het gebruik van Yahoo Media Player is een andere manier. U hoeft alleen maar Yahoo te laten het werk van het afspelen van de muziek doen.

Het kan mp3 en een reeks andere formaten afspelen. Met een eenvoudige regel code kunt u het toevoegen aan een webpagina en de HTML-pagina gemakkelijk omzetten in een professionele afspeellijst.

Yahoo Media Player

Voorbeeld

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

Probeer het zelf uit

Het gebruik van Yahoo Player is gratis. Om het te gebruiken, moet u dit JavaScript-inscriptie aan het einde van de pagina toevoegen:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Vervolgens hoeft u alleen maar de MP3-bestandshypersoort naar uw HTML te koppelen, JavaScript maakt automatisch een play-knop voor elk nummer aan:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

Yahoo Media Player biedt uw gebruikers een kleine play-knop aan, niet een volledige speler. Wanneer u echter op deze knop klikt, wordt de volledige speler weergegeven.

Let op, deze speler blijft altijd aan de onderkant van het venster hangen. Klik erop om hem eruit te schuiven.

Gebruik hyperlinks

Als een webpagina een hyperlink naar een mediabestand bevat, zullen de meeste browsers een "hulpapplicatie" gebruiken om het bestand af te spelen.

De volgende codefragment toont een link naar een mp3-bestand. Als de gebruiker op deze link klikt, zal de browser een "hulpapplicatie" starten om het bestand af te spelen:

Voorbeeld

<a href="song.mp3">Play the sound</a>

Probeer het zelf uit

Inline geluid

Wanneer je geluid op een webpagina bevat of het is onderdeel van de webpagina, wordt het inline geluid genoemd.

Als je van plan bent om inline geluiden te gebruiken in een webapplicatie, moet je je realiseren dat veel mensen vinden dat inline geluiden vervelend zijn. Bovendien moet je rekening houden met het feit dat gebruikers mogelijk de optie voor inline geluiden in hun browser hebben uitgeschakeld.

Ons beste advies is om alleen in te sluiten waar de gebruiker wil horen dat de geluiden inline zijn. Een positief voorbeeld is, als de gebruiker een opname moet horen en op een link moet klikken, wordt de pagina geopend en wordt de opname afgespeeld.

HTML 4.01 Multimedia Tags

Tag Beschrijving
<applet> Niet aanbevolen. Definieer ingesloten applet.
<embed> Niet aanbevolen in HTML4, toegestaan in HTML5. Definieer ingesloten objecten.
<object> Definieer ingesloten objecten.
<param> Definieer de parameters van het object.

HTML 5 Multimedia Tags

Tag Beschrijving
<audio> Tags definiëren geluid, zoals muziek of andere audio streams.
<embed> Tags definiëren ingesloten inhoud, zoals plugins.