Bij de posts over WebJay (hier en hier) afgelopen week maakte ik gebruik van de Hideout XSPF Music Player ontwikkeld door Jason Kottke.
Ik was vergeten uit te leggen hoe ik dat gedaan heb, dan daarom nu alsnog even.
Er zijn drie uitvoeringen van de player die je kunt downloaden van de sourceforge-website, maar ze staan ook in een ‘werkende’ vorm op die website, dus je kunt ook naar de SWF-bestanden daar verwijzen.
Aanroepen van de player
Op de website daar staan een paar voorbeelden van het aanroepen van de player. Als je de ‘Heerlijk Foute Muziek’-playlist zou willen laten afspelen in de ‘slim-version’ (die wat ik gebruik), dan ziet de url er zo uit:
playlist_url=http%3A%2F%2Fwebjay%2Eorg%2Fby%2Fpiair%2F
heerlijkfoutemuziek%2Exspf&1=1
Maar omdat je de player in een pagina wilt ‘embedden’ komt er wat meer code voor kijken, voornamelijk ook omdat internet explorer en (o.a.) firefox andere code verwachten.
Daarom ziet het resultaat er zo uit:
flash/swflash.cab#version=7,0,0,0″ id=”xspf_player” align=”middle” height=”15″ width=”400″>
<param name=”allowScriptAccess” value=”sameDomain”>
<param name=”movie” value=”http://musicplayer.sourceforge.net/xspf_player_slim.swf?
playlist_url=http%3A%2F%2Fwebjay%2Eorg%2Fby%2Fpiair%2F
heerlijkfoutemuziek%2Exspf&1=1″>
<param name=”quality” value=”high”>
<param name=”bgcolor” value=”#e6e6e6″>
<embed src=”http://musicplayer.sourceforge.net/xspf_player_slim.swf?
playlist_url=http%3A%2F%2Fwebjay%2Eorg%2Fby%2Fpiair%2F
heerlijkfoutemuziek%2Exspf&1=1″ quality=”high” bgcolor=”#e6e6e6″ name=”xspf_player” allowscriptaccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” align=”center” height=”15″ width=”400″>
</object>
Gelukkig hoef je dat niet allemaal zelf uit te zoeken en kun je bijvoorbeeld gebruik maken van deze handige pagina van Peter Forret waar je maar gewoon de url van de playlist hoeft in te voeren en dan moet kiezen om de “EMBEDDED:Fabricio’s Musicplayer (400×15)” optie bij ‘Embedding style’ om de juiste code te krijgen.
De code die gegenereerd wordt verwijst overigens naar de SWF-bestanden op de sourceforge-website, om die code te gebruiken hoef je dus niet eens de SWF-bestanden te downloaden!
Waarom iFrame?
Ik heb eerst geprobeerd om de gegenereerde code rechtstreeks in een post hier op mijn weblog te plakken. Maar waarschijnlijk door de gebruikte stylesheet had dat tot gevolg dat er een paar lege regels boven de player zichtbaar werden.
Daarnaast was het zo dat ik het wel heel veel lelijke code voor in een bericht vond. Nu zijn er mooiere manieren om dat in Nucleus op te lossen (via een plugin die je dan wel zelf moet schrijven), maar ik ging voor quick-and-dirty.
Ik heb een klein PHP-scriptje gemaakt met de naam player.php. Dat bestand bevat de volgende code:
$playList = urlencode($_GET[‘playlist’]);
if ($playList != “”) {
?>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=7,0,0,0″ id=”xspf_player” align=”middle” height=”15″ width=”400″>
<param name=”allowScriptAccess” value=”sameDomain”>
<param name=”movie” value=”http://musicplayer.sourceforge.net/xspf_player_slim.swf?
playlist_url=<? echo $playList?>%2Exspf&1=1″>
<param name=”quality” value=”high”>
<param name=”bgcolor” value=”#e6e6e6″>
<embed src=”http://musicplayer.sourceforge.net/xspf_player_slim.swf?
playlist_url=<? echo $playList ?>%2Exspf&1=1″ quality=”high” bgcolor=”#e6e6e6″ name=”xspf_player” allowscriptaccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” align=”center” height=”15″ width=”400″>
</object>
<?
}
?>
Daardoor voeg ik nu in het bericht in:
heerlijkfoutemuziek” frameborder=”0″ height=”30″ scrolling=”no” width=”410″></iframe>
met als resultaat
That’s it.
pff, was nog een heel werk om de lijnen ‘passend’ te krijgen! Ik heb hier en daar extra returns moeten invoegen!
Ook interessant:
Dag Pierre,
Dank je wel voor je duidelijke post.
Je hebt me enthousiast gekregen voor dit onderwerp.
Mijn resultaat vind je op: http://www.edu-webcreation.nl/dancemo…
Hartelijke groet,
Evert
Tip. Een andere zeer fraaie Flash mp3 speler vind je hier:
http://www.jeroenwijering.com/?item=F…
@Tim: Klopt, ziet er mooi uit. Ik vond hem alleen niet zo handig om ‘in’ een post te gebruiken, wilde de gebruikte ruimte zo klein mogelijk houden.