Der Yahoo Media Player
Yahoo! hat den Dienst am 01.07.2013 eingestellt.
Einen online-mp3-Player mit einer einzigen Zeile HTML Code erstellen
Schneller Einfacher geht's nicht:
Die "offizielle" Anleitung "in 3 Zeilen" zum Einbau des Players (http://mediaplayer.yahoo.com/)
Mit dem beschriebenen Verfahren - eine Zeile HTML - funktioniert der Player. Demo des Standard YML Players.
Es gibt jedoch einige Möglichkeiten, den Player aufzupeppen. Das Ergebnis wird in der folgenden Demo gezeigt, und die dazu erforderlichen Schritte anschließend beschrieben.
Demo
- Diese Musik ist GEMA-frei [211 kB, 0:21]
- Aria Variata, BWV 989 - J.S. Bach [6,5 MB, 7:07]
- Prelude & Fugue 2 in C Minor, BWV 847 [3,7 MB, 1:38]
- It's a Long Way to Tipperary [2,9 MB, 3:11]
Diese Musik ist GEMA-frei
Aria Variata, BWV 989 - J.S. Bach
It's a Long Way to TipperaryTastatursteuerung des Players
Schön: Der Player lässt sich auch ohne Maus bedienen.
| Auswahl eines Titels auf der Seite | Tab + Enter |
| Play / Pause (toggle) | Enter, oder Umschalt + Leertaste |
| Lauter / Leiser | Umschalt + Pfeiltaste rauf / runter (halten) Mit Screen Reader: Umschalt + Strg + Pfeiltaste rauf / runter |
| Nächster / vorheriger Titel | Umschalt + Pfeiltaste rechts / links Diese Tastenkombi kann vermutlich wegen eines Konflikts mit Ihrem Screen Reader nicht genutzt werden. |
Mac OS X: Bei allen Tastaturkürzeln zusätzlich crtl halten
Was schmerzlich auffällt: Die Tastaturkürzel Umschalt + Pfeiltasten sind in Screen Readern üblicherweise zum Markieren von Text belegt. Dieser Konflikt legt die entsprechenden Tastaturkürzel bei Verwendung eines Screen Readers also lahm.
Der Fortschrittsbalken
Ein Player ohne Fortschrittsbalken ist nur ein halber Player. Der Fortschrittsbalken dient auch dazu, beliebige Stellen eines Stücks direkt anzuspringen; wichtig bei längeren Stücken. Leider klappt das bisher nur mit der Maus. Eine entsprechende Tastenkombi würde die Sache richtig rund machen.
Eric Fehrenbacher von Yahoo hat zu diesem Zweck ein schönes Addon entwickelt. Dazu die beiden Dateien http://fehrenbacher.com/lib/ef.ymp.utilities.js und http://fehrenbacher.com/lib/ef.ymp.trackSeek.js herunterladen und auf den eigenen Server packen. Dann nur noch zwei weitere Zeilen ins HTML. Im <head> steht dann also:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> <script src="ef.ymp.utilities.js" type="text/javascript"></script> <script src="ef.ymp.trackSeek.js" type="text/javascript"></script>
Ein Bild anzeigen
Das ist einfach. Der Link zum mp3 wird einfach um ein Bild ergänzt.
<a href="/audios/time_is_tight.mp3"> <img src="bild.jpg" alt="" height="0" width="0" style="display:none" /> Time is tight</a>
style="display:none" bewirkt, dass das Bild im Text nicht angezeigt wird, sondern nur im Player.
Das Bild muss quadratisch sein, und sollte idealerweise 46 × 46 px groß sein.
Titel und Artist im Player anzeigen
Bisher wird im Player einfach der Linktext angezeigt. In unserem Beispiel also "Time is tight".
Mit einem (leider nicht validen) Hack lässt sich auch dies verfeinern:
<a href="/audios/time_is_tight.mp3" title="Time is tight" artist="The Magics">
Feinschliff am Aussehen des Players
Jetzt noch den überflüssigen Link "Learn more about this player" mit CSS wegzaubern.
Dazu folgenden CSS Code in den <head> Bereich
Hinweis: Ich gehe davon aus, dass dies nicht gegen die Nutzungsbedingungen von Yahoo verstößt. Das CSS ist ebenfall von ric Fehrenbacher, einem Yahoo Mitarbeiter.
<style type="text/css" media="screen">
/* removes the ad from the right side of the toolbar */
/* http://fehrenbacher.com/technology/code/ymp-yahoo-media-player/ymp-trackseek/ */
.ymp-player-min #ymp-body {
width: 25px !important;
}
.ymp-player-max #ymp-body {
width: 570px !important;
}
#ymp-body #ymp-body-base {
width: 560px !important;
}
#ymp-body #ymp-body-strip {
width: 560px !important;
}
#ymp-body #ymp-relevance {
display: none !important;
}
.ymp-playlist-anchor {
display: none;
}
a.ymp-tray-playlist, a.ymp-tray-playlist:visited {
color: #FFFFFF !important;
}
a.ymp-tray-track, a.ymp-tray-track:visited {
color: #FFFFFF !important;
}
}
</style>
Fertig. Viel Spaß mit dem Player!
Fazit
Mit einer Zeile HTML nachträglich einen stylischen Player in jede Seite integrieren, das hat was.
Und nur wenig zusätzliche Arbeit, um den Player noch weiter aufzumotzen.
Nutzer von Screen Readern können den Player nutzen.
Vor allem die Tatsache, dass die Wiedergabe sofort startet, ohne zeitraubenden Download und Aufruf eines lokalen Players, macht die Benutzung attraktiv.
Leider können aber wichtige Funktionen mit Screen Readern wegen Konflikten mit Tastenkombis nicht genutzt werden.
Hier könnte der Hersteller ohne großen Aufwand nachbessern.
Der nächste Schritt
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
6 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Eva Papst schrieb am Mittwoch, 04.11.09 14:33 Uhr:
Eine kleine Ergänzung zum Thema Screen Reader und Pfeiltasten:
Diese sind nicht nur eine rasche, sondern auch sehr intuitive Navigationsmöglichkeit, weil die Assoziation zur Bewegungsrichtung eindeutig ist. Darum ist es auch verständlich, dass sich Screen Reader ihrer bedienen.
Kombinationen mit Alt, Strg und/oder Umschalt dienen z.B. zur Navigation innerhalb von Tabellen.
Welche Kombinationen belegt sind, lässt sich im Handbuch nachlesen, aber auch intuitiv durch Ausprobieren rasch feststellen.
Jeder Screen Reader verfügt aber auch über eine so genannte "Durchreiche-Funktion", eine Tastenkombination, die den Screen Reader anweist, die nächste Taste oder Tastenkombination nicht zu interpretieren, sondern an die jeweils laufende Anwendung weiterzuleiten.
Das mag umständlich klingen, hat sich in der Praxis aber bewährt.
Die Durchreiche-Tasten sind:
- NVDA-Taste+F2
- JAWS-Taste+3
- WE-Taste+B
Bei dem Konflikt mit den Pfeiltasten mag es sich um eine Unbequemlichkeit bzw. Erschwernis handeln. Die normalerweise weitaus größeren Probleme herkömmlicher Player liegen jedoch anderswo: Zum einen in der Unbedienbarkeit mittels Tastatur und zum anderen bei den fast immer unbeschrifteten Buttons. Player ohne diese Probleme sind daher eine Wohltat, auch wenn noch nicht alle Wünsche erfüllt sein mögen.
Fritz schrieb am Donnerstag, 05.11.09 13:55 Uhr:
Nachtrag zum Fortschrittsbalken-Addon:
Der Fortschrittsbalken funktioniert erst, nachdem die ganze Datei im Hintergrund heruntergeladen wurde. Erst dann kann man auch mit der Maus eine beliebige Stelle anspringen.
Gut, inzwischen kann man ja schon mal Pseudo-Streaming genießen und die Musik hören. Aber ein wenig dämpft das schon meine Begeisterung. Es gibt Flash-Player, die das besser lösen.
Zum anderen frage ich mich natürlich, wieso es für dieses, meines Erachtens unverzichtbare Feature, eines Addons bedarf. Warum baut Yahoo dieses Feature nicht gleich in den Player ein?
Fritz schrieb am Mittwoch, 18.11.09 01:14 Uhr:
Mit wav-Dateien lässt sich der Y!Player ganz schön ins Bockshorn jagen: Er platziert einen Play-Button auf die Seite, er zeigt sie in der Playlist, aber er spielt anstelle der wav-Datei einfach das nächstfolgende mp3.
Mal sehen, ob sich das beheben lässt.
Nachtrag: Der IE spielt wavs. Aber nur der IE.
Fritz schrieb am Sonntag, 22.11.09 17:44 Uhr:
Entweder ich hatte am 18.11. etwas falsch gemacht, oder Yahoo! hat zwischenzeitlich nachgebessert. Hier wird ja automatisch die jeweils aktuelle Version des Players aufgerufen. Mit http://mediaplayer.yahoo.com/latest
Jedenfalls spielt der Player jetzt auch im Firefox .wav Dateien.
Fritz (Gast) schrieb am Dienstag, 14.09.10 01:34 Uhr:
Der Firefox 4.0 Beta 5 kommt mit dem Y! Player nicht mehr klar. Oder der Y! Player nicht mit Firefox? Ich weiß nicht recht, wie ich das einordnen soll?
Und ich weiß auch nicht so recht, was ich daraus schlussfolgern soll? Doch keine externen Dienste nutzen? Weil ich dann irgendwie ausgeliefert bin. Falls Yahoo das Interesse an diesem speziellen Dienst verloren hat, soll ich dann x Seiten neu schreiben? Oder weiter hoffen? Der Firefox 4.0 ist ja schließlich immer noch im Beta-Stadium. Dass Giganten wie Yahoo auf eine Anfrage meinerseits bezüglich eines solchen Nischenprodukts reagieren, diese Hoffnung habe ich längst aufgegeben. Alles, was nicht Mainstream ist, bleibt links liegen.
Also doch wieder jede Codezeile selbst schreiben?
Oder einfach resignieren, und alte Projekte dahinsiechen und vergammeln lassen?
Fritz schrieb am Donnerstag, 01.09.11 16:47 Uhr:
Yahoo! bietet eine neue Version (Beta) des Snippets an:
http://webplayer.yahoo.com/get/
<script type="text/javascript" src="http://webplayer.yahooapis.com/play er-beta.js"></script>
Viele der im Artikel beschriebenen Nachbesserungen sind damit nicht mehr nötig. Die Einbindung noch leichter. Gut gemacht Yahoo!