iePlayer spielt Musikdateien und Filme. Gestartet werden die Mediendateien über Mausklicks in den HTML-Seiten oder über Playlists.
> Die Story
iePlayer wurde programmiert, weil es mir zu öde war meine MP3s einfach 'nur so' abzuspielen. Die ganzen digitalisierten LPs lagen auf der Festplatte 'rum und setzten schon wieder Staub an. Ich wollte zumindest eine gefällige Darstellung der Interpretennamen und der Song-Titel und evtl. noch ein Bild dazu.
Nach anfänglichen Versuchen HTML-Dateien zu schreiben, die den Zugang zu den MP3s mit dem Internet Explorer gestatten, ist der iePlayer nun mit der MFC-Klasse CHtmlView realisiert.
Die Schalterflächen in der ersten Zeile: Start-/Pause-/Weiter-Schalter, Skip-Schalter, Stopp-Schalter, Liedposition, Lieddauer-Anzeige und der Menüschalter.
Die Schalterflächen am linken Rand: Spielliste starten/stoppen, An die Spielliste anhängen, Aus der Spielliste löschen, Eintrag nach unten schieben und Eintrag nach oben schieben.
Das Listenfeld zeigt die evtl. geöffnete Spielliste an.
Der Menüschalter öffnet ein Pop-Up-Menü. Die Menüeinträge: Spielliste öffnen..., Spielliste speichern..., Automatisch Spielliste erzeugen, Spielliste mischen, Drag 'n' Drop MP3s..., Einstellungen....
Hinweis:Wenn Sie während des Drops bei der Drag&Drop-Aktion die Strg-Taste drücken, werden die alten Playlist-Einträge durch die neuen ersetzt .
Stellen Sie hier ein, welche Dateiarten als Audio-/Videodatei wiedergegeben werden sollen. Die Dateiarten .mp3, .wav und einige andere, die ohne Zustun funktionieren sollten, sind voreingestellt.
Hinweis: Der
HTML-Generator kann ohne
HTML-Kenntnisse bedient werden!
Da es einigermaßen mühsam ist all die HTML-Seiten für die ganzen MP3s zu schreiben, gibt es etwas Hilfestellung vom iePlayer.
Wie man ohne HTML-Kenntnisse (etwas Computer-Verständnis) seine MP3s verlinken kann, wird in den folgenden Abschnitten an dem kleinen Startprojekt gezeigt.
Das Startprojekt kann dann anschließend zur eigenen MP3-Player-Station ausgebaut werden.
Damit die eben erzeugte Datei info.html korrekt angezeigt werden kann, muss die Verzeichnisliste noch aktualisiert werden. Wie das geht wird gleich erklärt. Keine Angst, das kann jeder, der schon mal das Gefühl hatte, der Computer tut was Vernünftiges, auch wenn man es ihm mit der Tastatur sagt ;-)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="STYLESHEET" type="text/css" href="styles.css">
</head>
<body class="list"><pre>
<a href="index-Info.html" target="Info" >***</a>
<a href="../Acoustic Interpret 1/info.html" target="Info" >Acoustic Interpret 1</a>
<a href="../Electric Interpret 2/info.html" target="Info" >Electric Interpret 2</a>
</pre>
<a href="../.doku/Dokumentation.html" target="_blank" >iePlayer-Doku</a>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="STYLESHEET" type="text/css" href="styles.css">
</head>
<body class="list"><pre>
<a href="index-Info.html" target="Info" >***</a>
<a href="../Acoustic Interpret 1/info.html" target="Info" >Acoustic Interpret 1</a>
<a href="../Electric Interpret 2/info.html" target="Info" >Electric Interpret 2</a>
<a href="../Neuer Interpret 3/info.html" target="Info" >Meine MP3s</a>
</pre>
</body>
</html>
Nun, nachdem klar, ist wie einfach man MP3s verlinken kann, steht dem Ausbau des Startprojekts nichts mehr im Wege. Das Vorgehen ist immer das gleiche:
Man kann die Sammlung auch auf CD oder DVD brennen. Der iePlayer ist direkt von CD/DVD startbar, wenn man die Dateien iePlayer.exe, index.html, das Verzeichnis .data und die MP3-Verzeichnisse auf auf die CD/DVD brennt.
Hinweis: Es ist entscheidend die richtige Verzeichnisstruktur einzuhalten. Wenn die Datei index.html im Verzeichnis c:/Musik liegt, sollten alle MP3- und HTML-Dateien eine Verzeichnisebene tiefer liegen, zum Beispiel in c:\Musik\XY-Gruppe, c:\Musik\ABC-Interpret usw. Nur dann werden die Stilvorlagen und Scripts gefunden und funktionieren richtig.
Wenn man tieferliegende Verzeichnisse benutzen will, muss man die relativen Pfadangaben auf die CSS- und die JavaScript(js)-Dateien anpassen.
Für die CSS-Datei wird
<link rel="STYLESHEET" type="text/css"
href="../.data/styles.css">
erweitert zu z. B.
<link rel="STYLESHEET" type="text/css"
href="../../.data/styles.css">
und für die JavaScript-Datei
wird
<script src="../.data/Info.js"
type="text/javascript">
erweitert zu z. B.
<script src="../../.data/Info.js"
type="text/javascript">
und schon funktioniert wieder alles.
Dieser Abschnitt erfordert HTML-Kenntnisse.
Der HTML-Generator benutzt auf Wunsch bei der HTML-Erstellung externe Layouts. Der Aufbau der Layout-Dateien kann gut verstanden werden, wenn man sich das folgende einfache Schema vorstellt:
Es fehlen nur noch einige Marken, die dem Generator ermöglichen die einzelnen Vorlagenteile zu erkennen (im Beispiel unten in fetten Buchstaben).
Eine maximal einfache Vorlagendatei, die alle diese Features realisiert wäre:
<!-- Layout Body -->
<html>
<body>
<h1>%_HEAD_%</h1>
%_LPS_%
</body>
</html>
<!-- Layout LP -->
<h2>%_LP_%
<a name="%_LP_ANKER_%"> </a></h2>
<img src="%_LP_PICTURE_%">
<ol>
%_SONGS_%
</ol><br clear=all>
<!-- Layout Song -->
<li><a href="%_SONG_%">
%_SONG_FRIENDLY_%</a>
Die Platzhaltermarken von unten nach oben:
Hinweis: Die Layout-Teile müssen in der Layout-Datei in der Reihenfolge <!-- Layout Body -->, <!-- Layout LP --> und <!-- Layout Song --> vorliegen.
Hinweis: Die einleitenden Layout-Teil-Kommentare müssen bis zu den Texten Body/LP/Song exakt richtig geschrieben sein. Die Body/LP/Song-Kommentare werden nicht in die HTML-Datei geschrieben.
Tipps: Je einfacher die HTML-Dateien aufgebaut sind desto einfacher findet man sich bei Wartungsarbeiten zurecht. Mit Stylesheets kann man sich viel Formatiertext sparen. Bevor man die Großproduktion anfängt, schadet es nichts, die erzeugten HTML-Dateien mal mit einem HTML-Validator zu prüfen (sollte ich auch mal machen). Im iePlayer-Archiv befindet sich die Datei Standard.layout die, zusammen mit Info.js, einiges von der Funktionalität vom iePlayer enthält.
Wenn ein Layout erfolgreich geladen wurde, bleibt es aktiv, bis ein neues Layout geladen wird. Wenn beim Öffnen eines Layouts ein Fehler auftritt, wird das interne Standard-Layout aktiviert und bleibt aktiv, bis ein fehlerfreies Layout geladen wird.
Beim Erzeugen neuer Info.html-Dateien wird geprüft, ob ein User-Layout in der Registrierdatenbank gespeichert ist. Wenn ja, wird dieses Layout verwendet. Wenn nicht , wird ein internes Layout genutzt.
Dieser Abschnitt ist nur interessant, wenn man seine eigenen Vorstellungen der HTML-Seiten verwirklichen möchte und die Möglichkeiten des HTML-Generators nicht ausreichen.
Um diesen Abschnitt zu verstehen sind HTML-Kenntnisse erforderlich.
Damit alles so funktioniert, wie es soll, ist ein Frameset notwendig. Das Frameset muss einen Frame mit Namen Info enthalten. Im Info-Frame werden die Links auf die Songs erwartet.
<frameset cols="20%, 80%">
<frame src="IrgendEin.htm" name="IrgendEinName">
<frame src="Info.htm" name="Info">
</frameset>
Der andere Frame kann zu was auch immer genutzt werden.
Die MP3s sollten in einem a href-Tag verpackt sein, sonst werden Sie nicht gefunden. Man kann Sie dann vielleicht manuell in einem JavaScript starten, die automatische Weiterschaltung funktioniert aber ziemlich sicher nicht.
Wenn eine MP3-Datei mehrmals auf einer Seite auftauchen soll (zum Beispiel weil der selbe Song auf mehereren LPs erschien), kann man die Referenz des ersten Dublikats mit ,1 erweitern, zum Beispiel End Of The Night.mp3,1. Die richtige Abspielreihenfolge ist dann gewährleistet. Der HTML-Generator nimmt diese Erweiterung automatisch vor.
Mit den speziellen Meta-Info-Links können die Meta-Informationen aus MP3-, WMA- und Ogg-Dateien ausgelesen werden. Die Links werden zu speziellen Links, weil sie mit der Zeichenfolge .metaSubst enden. An .metaSubst kann dann noch eine Zeichenfolge angehängt sein, die angibt, in welchem Frame die neue Seite geöffnet werden soll. In den Beispielen unten wird _blank angehängt, damit ein neues Fenster geöffnet wir. Man könnte die Links aber auch mit z. B. .metaSubstInfo enden lassen, dann würden die neuen Fenster im Frame Info geladen werden.
Natürlich können die Links auch auf lokale Dateien verweisen. Es wäre z. B. möglich die Titel einer HTML-Datei zu übergeben, in der ein JavaScript-Programm die Infos dann wieder ausliest und die Inhalte der HTML-Dateien anpasst usw.
Die Meta-Informationen, die man ausgelesen haben will, werden in ein doppeltes Klammernpaar gesetzt. Im einfachsten Fall sieht das für einen Interpreten so aus: [[Interpret]]. Wenn man den Interpreten z. B. an Google übergeben will, ist es meist sinnvoll die Suchwörter für die Google-Engine mit Anführungszeichen zusammenzufassen, damit die Suchtreffer von Google auch wirklich treffen. Das würde, wenn man einen vollen Namen bei Google eingibt, etwa so aussehen: "The Black Keys". Weil Sonderzeichen in Internet-Adressen speziell kodiert werden müssen, würde der entsprechende Abschnitt im Meta-Info-Link so aussehen: [%22[Interpret]%22]. Die beiden %22 sind die Hexadezimalkodierung der ASCII-Werte der Anführungszeichen. Die ASCII-Werte können z. B. hier (mit dem ASCII-Button) aufgerufen werden.
Beispiel, neues Fenster mit der englischen Wikipedia und dem
Interpreten des momentan gespielten Lieds öffnen:
<a href="http://en.wikipedia.org/wiki/[[Interpret]].metaSubst_blank">Wikipedia
(Interpret)</a>
Beispiele, Google mit dem Interpreten und dem Titel
(Pluszeichen im
Title-Klammernpaar beachten) des momentan gespielten Lieds aufrufen:
<a href="http://www.google.de/search?q=[%22[Interpret]%22][+%22[Title]%22].metaSubst_blank">Google
(Interpret Titel)</a>
Da die verschiedenen Dateiformate ihre Meta-Informationen mit verschiedenen Bezeichnungen speichern, sorgt der iePlayer dafür, dass bei der Frage nach [[Interpret]] bei MP3s der Eintrag für TPE1 und bei Ogg alternativ die Einträge für Artist oder Performer geliefert werden.
Folgende Übersetzungen existieren:
Interpret: Interpret, TPE1,
Artist, Performer.
Title: Title, TIT2.
Album: Album, TALB.
Year:
Year, TYER, Date.
Comment: Comment, COMM, Comments.
Track:
Track, TRCK, Tracknumber.
Bei MP3 werden folgende Meta-Infos gespeichert:
COMM (Comments), MCDI (Music CD identifier), PCNT
(Play
counter), POPM (Popularimeter), RVAD (Relative volume), TALB (Album),
TBPM (beats per minute), TCOM (Composer), TCOP
(Copyright
message), TDAT (Date), TEXT (Text writer), TIME (Time), TIT1
(Content group description), TIT2 (Title), TIT3 (Subtitle),
TLAN
(Language), TOAL (Original album), TOFN (Original filename), TOLY
(Original text writer), TOPE (Original artist), TORY (Original
release year), TPE1 (Lead performer), TPE2 (Band), TPE3 (Conductor),
TPE4 (Interpreted, remixed, or otherwise modified by), TPUB
(Publisher), TRCK (Track number), TRDA (Recording dates), TRSN
(Internet radio station name), TRSO (Internet radio station owner),
TSIZ (Size), TSRC (ISRC), TYER (Year), TXXX (User defined text
information frame), USER (Terms of use), USLT (Unsychronized lyric),
WCOP (Copyright), WOAF (Official audio file webpage), WOAR (Official
artist/performer webpage), WOAS (Official audio source webpage), WPUB
(Publishers official webpage), WXXX (User defined URL link frame).
Die MCDI-Info könnte
also z. B. auf die folgende Art für die Datei showInfo.htm
ausgelesen werden, die in den HTML-Frame Info2 geladen
wird:
<a href="showInfo.htm?m=[[MCDI]].metaSubstInfo2">Zeige
Music CD identifier</a>
Dieses Beispiel eignet sich z. B. auch für eine automatisierte
Abfrage der Meta-Infos mittels JavaScript-Progarmm, das beispielsweise
alle 3 Sekunden aufgerufen wird. Es entsteht im iePlayer
dabei kaum Mehraufwand, weil die Meta-Infos nur neu eingelesen werden,
wenn sich der Dateiname der angefragten Mediendatei geändert
hat.
Das JavaScript selbst braucht freilich seine Zeit.
Hinweis: Es werden bei Ogg- und MP3-(ID3v2-)Dateien nur die Meta-Infos ausgewertet, die innerhalb der ersten 32.000 Bytes liegen. Bei WMA-Dateien werden die erste 65.000 Bytes gescannt.
Mit Command-Links können die wichtigsten Player-Kommandos über HTML-Links aufgerufen werden. Command-Links enden mit der Zeichenfolge .command.
Einige selbsterklärende Beispiele:
<a href="play.command">Start</a>
<a href="pause.command">Pause</a>
<a href="next.command">Nächstes</a>
<a href="stop.command">Stopp</a>
Und noch einige experimentelle Kommandos, die eingebaut sind,
aber sich in der Syntax eventuell noch ändern können:
reposition(50).command – die Abspielposition auf 50 Sekunden
setzen.
reposition(50%).command – die Abspielposition auf 50
Prozent setzen.
playlist.command – die Playliste
abspielen.
stoplist.command – die
Playliste-Wiedergabe stoppen.
addtoplaylist.command – den
aktuellen Track an die Playliste anhängen.
deletefromplaylist.command – den
markierten Track aus der Playliste löschen.
playlistselect(1).command – den
Track an der Playlistenposition 1 markieren (Basis 0).
playlistunselect.command –
Playlistenmarkierung aufheben.
moveup.command – markierten
Track in der Playliste um eins vorstellen.
movedown.command – markierten Track in der Playliste um eins
nach
unten schieben.
openplaylist('Silvester 2008.playlist').command
– die genannte Playliste öffnen.</a>
saveplaylist('Silvester 2009.playlist').command
– die Playliste speichern</a>
autoplaylist.command – schaltet
den Menüpunkt Automatische Spielleiste erzeugen
um.
mixplaylist.command – mischt die
Spielliste.
Ich kann mir vorstellen, dass jemand eine Spielliste hat und dazu mehr Bilder zeigen will als MP3s vorhanden sind.
Dazu kann man zum Beispiel die JavaScript-Funktion hi () aus Info.js oder ein eigenes Script modifizieren, das nach einer vorgegebenen Zeit (z. B. 10 Sekunden) auf eine andere HTML-Seite umgeschaltet wird usw. Es gibt aber auch script-lose Lösungen dieses Problems (siehe SelfHTML).
Der iePlayer mischt sich erst wieder ins Geschehen, wenn die MP3-Datei fertig gespielt hat. Er spielt dann z. B. die nächste Datei der Playlist oder die MP3-Datei, die auf die gerade fertiggespielte in der HTML-Datei folgen würde, die zum Startzeitpunkt der gerade beendeten MP3-Datei folgen würde.
iePlayer.exe -- das Programm.
index.html -- die Haupt-HTML-Datei mit dem
Frameset.
.data\index-List.html -- wird im Frameset in
die linke Spalte
geladen, enthält die Navigation.
.data\index-Info.html -- die Hauptanzeige
mit den
MP3-Hyperlinks.
.data\index-Head.html -- die Kopfzeile mit
der
Hauptüberschrift.
.data\styles.css -- Stylesheet-Datei
für die
HTML-Seiten.
.data\Info.js -- JavaScript-Datei
für die
info.html-Dateien.
.doku\Dokumentation.html -- die
Dokumentation zum Programm.
.doku\styles-d.css -- Stylesheet-Datei
für die
Dokumentation.
.doku\*.gif -- Bilder für die
Dokumentation.
charset=utf-8
enthalten,
funktioniert nun auch
die automatische Trackweiterschaltung bei Dateinamen mit ASCII-Zeichen größer 127.<a
href="Woodstock.avi,Start=2:36:40:00">
spielt die Datei ab dem Offset 2 h 36 m 40 s 0 hs ab (Santana). Der
Link <a
href="Woodstock.avi,Start=38:37:0,Stop=46:07:0">
spielt die Datei ab dem Offset 38 m 37 s 0 hs ab und endet bei der
Position 46 m 07 s 0 hs (Canned Heat).