HTML Audio

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

Problemen, problemen en oplossingen

Het afspelen van audio in HTML is niet gemakkelijk!

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

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

Gebruik plugins

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

Plugins 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 plugins 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 worden weergegeven als door externe plugins.

Gebruik het <embed>-element

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

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

Vraag:

  • Het <embed>-tag is in HTML 4 ongeldig. De pagina kan niet worden geverifieerd met HTML 4.
  • Verschillende browsers ondersteunen audioformaten verschillend.
  • Als de browser het bestandstype niet ondersteunt, kan de audio niet worden afgespeeld zonder plugin.
  • Als de plugin niet is geïnstalleerd op de computer van de gebruiker, kan de audio niet worden afgespeeld.
  • Als het bestand naar een ander formaat wordt geconverteerd, kan het nog steeds niet in alle browsers worden afgespeeld.

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

Gebruik het <object>-element

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

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

Vraag:

  • Verschillende browsers ondersteunen audioformaten verschillend.
  • Als de browser het bestandstype niet ondersteunt, kan de audio niet worden afgespeeld zonder plugin.
  • Als de plugin niet is geïnstalleerd op de computer van de gebruiker, kan de audio niet worden afgespeeld.
  • Als het bestand naar een ander formaat wordt geconverteerd, kan het nog steeds niet in alle browsers worden afgespeeld.

Gebruik het HTML5 <audio>-element

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

Voorbeeld

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

Probeer het zelf

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

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

Vraag:

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

Opmerking:Oplossing: 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

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 het <embed>-element.

Vraag:

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

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

De eenvoudigste manier om audio toe te voegen aan een website

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

Yahoo's Media Player hoort absoluut bij de beste.

Het gebruik van Yahoo Media Player is een andere benadering. 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 playlist.

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

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

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

Dan hoeft u alleen maar de MP3-bestandshyperslink aan uw HTML toe te voegen, JavaScript zal automatisch een play-knop voor elk nummer aanmaken:

<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 het uit te schuiven.

Gebruik hyperlinks

Als een webpagina hyperlinks bevat naar mediabestanden, 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">Speel het geluid af</a>

Probeer het zelf

Inline geluid

Wanneer je geluid op een webpagina bevat of het is onderdeel van een 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 geluid in hun browser hebben uitgeschakeld.

Ons beste advies is om deze alleen te gebruiken waar de gebruiker een inline geluid wil horen. Een positief voorbeeld is wanneer de gebruiker een opname moet horen en op een link moet klikken, dan 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 audiostromen.
<embed> Tags definiëren ingesloten inhoud, zoals plugins.