HTML5-Audio-Player mit XSPF-Unterstützung

Abgelegt unter:
Kurz-URL: http://mkzä.de/542

Aufgrund eines -erm- Vorschlages, habe ich mich mal hingesetzt und einen HTML5-Audio-Player geschrieben. Natürlich habe ich vorher nicht gesucht, ob es schon fertige Player gibt. :P Hätte ich das getan, hätte ich wahrscheinlich den jPlayer eingebunden. Allerdings kann der keine XSPF-Playlisten lesen und hat nicht so eine hübsche Laufschrift für zulange Titel. ;) (Ja, die sollte dort auch recht einfach einzubauen sein...)

Testet das gut Stück doch mal bitte auch Herz und Nieren und teilt mit, ob er was taugt.

Vielleicht veröffentliche ich dann auch mal den Sourcecode und wie mal den Player einbindet (höhö).

[Update:
Wenn die PC-Welt schon hierher verlinkt, dann lüfte ich doch auch mal das Geheimnis um die Einbindung des Players. Nicht, dass es sonderlich versteckt wäre. ;)

<script src="/files/xspf_parser.js"></script>
<script src="/files/jquery-latest.min.js"></script>
<script src="/files/test.js"></script>
<link rel="stylesheet" type="text/css" href="/files/style.css">

<div id="player_1">
</div>
<script>
loadPlayer("/files/fmc10/Freeloaded-Sinn-ogg.xspf", "player_1");
"player_2");
</script>

Ist also alles recht überschaubar. Die id des divs wird dem JavaScript übergeben, das den Player lädt. Dazu dann noch die URL der Playlist und gut ist.

Optisch lässt sich das ganze noch beliebig aufpeppen. Mit ein wenig Aufwand kann man aber sicher auch die XSPF-Unterstütung auch in den jplayer einbinden, der von Haus aus ganz andere Konfigurationsmöglichkeiten bietet. Mit denen man sich dann aber halt auch auseinandersetzen. Mir gefällt die Einfachheit von meinem Player trotzdem besser. Sollte ihn jemand irgendwo einsetzen, würde ich mich über eine Rückmeldung freuen. Aufgrund von mangelnder Erfindungshöhe maße ich mir nicht an, irgendwelche Rechte am Code geltend zu machen.]

Trackback URL for this post:

http://musik.klarmachen-zum-aendern.de/trackback/542
Your rating: Keines Average: 4.5 (2 votes)

Kommentare

Hallo Herr Hufgard

Ich bin schon seit einiger Zeit auf der Suche nach einem HTML5 Player der XSPF kann. Nun bin ich endlich fündig geworden, doch irgendwie hapert es noch bei der einbindung.

Hier der Code in der dashboard.php

loadPlayer("js/Freeloaded-Sinn-ogg.xspf", "player_1");

Wenn ich den Code übernehme und die Pfade für die Dateien anpasse, bekomme ich den folgenden Fehler:

dashboard.php:607Uncaught ReferenceError: loadPlayer is not defined
(anonymous function)

Informationen die ich bieten kann:

Browser: Chrome 11.0.696.65
OS: Windows 7 Ultimate x64

Ressources Tab (Chrome):

test.js
xspf_parser.js
style.css
dashboard.php (1) <<<< Hier scheint das Problem zu liegen.

Ich gebe zu dass ich nicht gerade fit in JS bin, deshalb wäre ich froh, wenn sie mir hier weiterhlefen könnten.

Grüsse und ein schönes Wochenende, PB

Hallo,

also in Chrome selber funktioniert der Player. Wäre also spannend zu sehen, was in der dashboard.php alles steht. Ein Link zur Seite wäre alternativ auch ok. :)

Muss das leider bestätigen - werde das Teil auch mal (würg, vielleicht nicht grad direkt nach dem Essen....) mit dem IE testen. Sieht ansonsten gut aus. Würde mich interessieren, wie man das Teil in eine Joomla-Seite reinbekommt...

Oh shit: im IE wird das Teil bei mir nur als weißer Rahmen ohne Inhalt angezeigt.

Wundert mich nicht wirklich. Der IE hat's nicht so mit HTML5. Für solche Steinzeit-Browser könnte (tm) man ein Fallback auf einen Flash-Player einbinden. Der bräuchte dann aber wiederum MP3s in der Playliste.

Kann man in joomla HTML direkt in einem Beitrag einbinden? Dann wären das nur ein paar weniger Zeilen. Aber ich denke, bis man den wirklich produktiv einsetzt, sollte noch ein wenig daran geschraubt werden. :)

Moin Moin

Die Lautstärkeregelung funktioniert hier mit Firefox 3.6.10 nicht.

Mouse_over bringt Lautstärkeregelung zum Vorschein, wird dann aber wenn man versucht mit der Maus die Lautstärke zu regeln wieder ausgeblendet sodas eine Lautstärkeänderung nicht möglich ist.

Interessanter Effekt. Ich würde da erst mal dem FF die Schuld für geben, denn ich fummel an dem Audio-Element nicht rum. *nachschau*

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <h2> <h3> <i>
  • Zeilen und Absätze werden automatisch erzeugt.
  • bar

Weitere Informationen über Formatierungsoptionen

CAPTCHA
Diese Frage dient dazu festzustellen, ob Sie ein Mensch sind, und um automatisierte SPAM-Beiträge zu verhindern.
Image CAPTCHA
Enter the characters shown in the image.

Bewerte dies

Your rating: Keines Average: 5 (5 votes)

Projekte

Artikel

Interviews

Informationen