Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

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

Tastatursteuerung des Players

Schön: Der Player lässt sich auch ohne Maus bedienen.

Auswahl eines Titels auf der SeiteTab + Enter
Play / Pause (toggle)Enter, oder Umschalt + Leertaste
Lauter / LeiserUmschalt + Pfeiltaste rauf / runter (halten) Mit Screen Reader: Umschalt + Strg + Pfeiltaste rauf / runter
Nächster / vorheriger TitelUmschalt + 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

Der Player "zum Mitnehmen"

6 Kommentare

  1. 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.

  2. 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?

  3. 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.

  4. 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.

  5. 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?

  6. 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!

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar oder Ihre Frage zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Einträge wider die guten Sitten, unsinnige Einträge, oder Spam kommentarlos zu entfernen.