Menu

Hoe werkt de HTML5 audio player?

Met de oude HTML standaard was er geen standaard voor het afspelen van audio files, je had hier voor een plugin nodig zoals b.v. een Flashplayer.
HTML5 biedt een standaard voor het afspelen van audio-bestanden en streams dit doe je met de tag <audio>

Browserondersteuning voor <audio> tag in HTML5:

  • Internet Explorer 9 of hoger
  • Firefox
  • Opera
  • Chrome
  • Safari

Let op: Internet Explorer 8 en eerdere versies, geen ondersteuning voor de <audio> tag.

Welke formaten worden ondersteunt?
Op dit moment zijn er 3 ondersteunde bestandsformaten voor de <audio> tag: MP3, WAV, Ogg

Streaming en HTML5 player
Men kan zowel met Icecast als SHOUTcast streams afspelen met de HTML5 player. Belangrijk is het fomaat van je stream, zie hier de ondersteuning.

  • Internet Explorer 9.0+ MP3, AAC
  • Chrome 6.0+ Ogg Vorbis, MP3, WAV
  • Firefox 3.6+ Ogg Vorbis, WAV
  • Safari 5.0+ MP3, AAC, WAV
  • Opera 10.0+ Ogg Vorbis, WAV

+ = gelijk of hoger dan de versie

Hieronder een voorbeeld HTML5 player met Icecast v2 stream op mp3 fomaat:

Zie hieronder de code van de gebruikte  HTML5 player:

<audio width="300" height="32" 
src="http://stream.intenseradio.net:8000/live" 
controls="controls">This player do not work on this browser
</audio>

Backup of 2e stream playlist .asx voor Media Player

Om meerdere files te laten afspelen in de Media Player kan je gebruik maken van meerdere <entry> Dit kan handig zijn als de stream down is dat er toch nog muziek of een melding wordt afgespeelt, zie hier voorbeeld hieronder:

Code:

<ASX version = “3.0″>
<TITLE>Je titel plaats je hier</TITLE>
<ENTRY>
<TITLE>Hier de titel van de eerste inhoud</TITLE>
<AUTHOR>Artiest naam</AUTHOR>

<COPYRIGHT>Stream copyright & datum plaats je hier</COPYRIGHT>
<REF HREF = “http://streamserverdomainnaam/publishingpointnaam” />
<REF HREF = “http://serverurl:portnummer” />

</ENTRY>
<ENTRY>
<TITLE>Hier de titel van de inhoud van de 2e stream of file</TITLE>
<AUTHOR>Artiest naam</AUTHOR>

<COPYRIGHT>Stream copyright & datum plaats je hier</COPYRIGHT>
<REF HREF = “http://streamserverdomainnaam/publishingpointnaam” />
<REF HREF = “http://serverurl:portnummer” />
</ENTRY>

</ASX>

1e <REF..  regel is voor media server streaming
2e <REF.. regel is voor SHOUTcast of Icecast streaming
1 van de 2 weghalen!

1. Open kladblok
2. Kopier de code hierboven en plak het in kladblok
3. Bewerk je code met je eigen gegevens van je stream
4. Ga naar bestand > opslaan als > Tik in “playlist.asx” als de bestandsnaam
5. Ga naar bestandtype en klik aan “Alle bestanden”
6. Opslaan en upload naar je webserver!

Succes!

Aanmelden van jouw radio station bij Windows Media Stations list

Het toevoegen van je station op de WMP station lijst is bijna het zelfde als de procedure voor itunes.

Stuur een e-mail naar [email protected] je krijgt een formulier deze volledig invullen en weer opsturen. Je komt dan daarna in de windows media player te staan als station.

Erg belangrijk is het aanmelden bij zulke zenderlijsten je zult zeker veel meer luisteraars krijgen!  Zie ook aanmelden uw radio station met informatie.

In Mediaplayer webpagina tonen

In het vorige artikel hebben we kunnen zien hoe we voor SHOUTcast of Icecast server muziek kunnen afspelen met de Mediaplayer dit doormiddel van .asx file.  We kunnen iets toevoegen in de playlist om een actieve player te maken, dit doen we met: <PARAM name =”HTMLView” VALUE = “http://www.uwradiostation.nl/playlistmediaplayer.html”>
Je kan natuurlijk je website tonen in de Mediaplayer maar je kunt ook een speciale pagina/site maken. De “PARAM name =”HTMLView”” plaats je als volgt in de .asx zie voorbeeld hieronder :

Code:

<ASX version = “3.0″>
<TITLE>Je titel plaats je hier</TITLE>
<ENTRY>
<TITLE>Hier nog een keer je titel van de inhoud</TITLE>
<AUTHOR>Artiest naam</AUTHOR>

<COPYRIGHT>Stream copyright & damtum plaatje hier</COPYRIGHT>
<REF HREF = “http://streamserverdomainnaam/publishingpointnaam” />
<REF HREF = “http://serverurl:portnummer” />
<PARAM name =”HTMLView” VALUE = “http://www.uwradiostation.nl/playlistmediaplayer.html”>
</ENTRY>
</ASX>

Hoe maak je een luisterlink voor mediaplayer?

Geef de luisteraars ook de mogelijkheid om met de mediaplayer te luisteren. Hiervoor maak je een playlist in asx formaat. Deze uitleg is bedoeld voor SHOUTcast streaming en Icecast streaming.

Code:

<ASX version = “3.0”>
<TITLE>Je titel plaats je hier</TITLE>
<ENTRY>
<TITLE>Hier nog een keer je titel van de inhoud</TITLE>
<AUTHOR>Artiest naam</AUTHOR>

<COPYRIGHT>Stream copyright & datum plaats je hier</COPYRIGHT>
<REF HREF = “http://streamserverdomainnaam/publishingpointnaam” />
<REF HREF = “http://serverurl:portnummer” />
</ENTRY>
</ASX>

1e <REF..  regel is voor icecast streaming
2e <REF.. regel is voor SHOUTcast streaming
1 van de 2 weghalen!

1. Open kladblok
2. Kopier de code hierboven en plak het in kladblok
3. Bewerk je code met je eigen gegevens van je stream
4. Ga naar bestand > opslaan als > Tik in “playlist.asx” als de bestandsnaam
5. Ga naar bestandtype en klik aan “Alle bestanden”
6. Opslaan en upload naar je webserver!

Succes!