Integration von Sound, Text, Images, Videos, Karten usw

[TS]

Hello @Linuchs,
hello @all,

Linuchs hatte vor längerer Zeit mal ein interessantes Web-Frontend für das Anzeigen, Abspielen und Synchronisieren von Audiodateien, Texten (und Bildern, bzw. Noten) vorgestellt.

1. wo finde ich das? Gibt es für diesen Anwendungsfall eine Wiki-Seite?

2. gibt es auch eine WebApp dafür, um die Sound- und Textdateien hochzuladen und die Synchronisation (bequem) herzustellen?

3. Welche Fallstricke erwarten mich dabei, wenn ich die Ideen für meine Zwecke (Hörspiele, Führungen nach Openstreetmap-Karte, interaktive Inhalte, o.ä.) nachvollziehen will?

4. Wer kann mir bei OpenStreetMap o.ä. weiterhelfen?

Das ist ganz grob umrissen mein Paket für dieses Jahr. Und ich würde mich über jede Unterstützung freuen. Ob ich überhaupt wieder in Gang komme, hängt von jedem kleinen Teilerfolg ab.

Glück Auf
Tom vom Berg

[JürgenB]

Hallo Tom,

4. Wer kann mir bei OpenStreetMap o.ä. weiterhelfen?

vielleicht ist ja mein GPX-Viewer etwas für dich. Mit dem kann ich Marker auch entlang eines Tracks bewegen. Im Beispiel passiert das Zeitgesteuert, aber wenn du es schaffst, den Medienplayer Events auslösen zu lassen, kann man damit Film/Ton und den Marker auf der Karte synchronisieren.

Gruß
Jürgen

[TS]

Hello Jürgen,

4. Wer kann mir bei OpenStreetMap o.ä. weiterhelfen?

vielleicht ist ja mein GPX-Viewer etwas für dich. Mit dem kann ich Marker auch entlang eines Tracks bewegen. Im Beispiel passiert das Zeitgesteuert, aber wenn du es schaffst, den Medienplayer Events auslösen zu lassen, kann man damit Film/Ton und den Marker auf der Karte synchronisieren.

Danke, gemerkt!
Ob ich es nachollziehen kann. weiß ich noch nicht ;-O

Glück Auf
Tom vom Berg

[Linuchs]

Hallo Tom,

Linuchs hatte vor längerer Zeit mal ein interessantes Web-Frontend für das Anzeigen, Abspielen und Synchronisieren von Audiodateien, Texten (und Bildern, bzw. Noten) vorgestellt.

Eine aktuelle Version gibt es hier: Dance The Night Away - ersetze example dot org durch osmer dot de

Das begann 2012 als druckbare Liederbücher im HTML-Code für unsere Törns „Singen unter Segeln” und auch für Singsang im Senioren-Wohnheim.

Ein Liederbuch besteht aus einem Inhaltsverzeichnis mit <iframe> für jedes Lied. Dann kam pro Lied immer mehr dazu:

• eine Audio-Spur zum Proben am PC
• Ein paar Notenzeilen vor dem Text, damit Musikanten die Tonart und den Anfang finden,
• Billige Liederbücher in A5, A6 fürs Publikum. Knifflige Seitenaufteilung bei beidseitigem Druck A4,
• die einzelnen Lieder im <iframe> erkennen am top.location.href, welche CSS-Datei sie laden müssen um auf A5 oder A6 zu schrumpfen.
• durch Klick auf die Notenzeile den Text ausblenden und ein Notenbuch drucken. Noten und Text pro Lied z.Z. noch auf ein <iframe> = eine Seite begrenzt.
• mehrere Audio-Spuren Für mehrstimmige Chöre / Bands, Lautstärke unabhängig von anderen Spuren zu regeln.
• Zum synchronen Abspielen die Buttons [alle zum Start] [alle play] [alle pause]
• Text farbig hinterlegt (Karaoke)
• Klick auf eine Zeile, <audio> setzt dort auf. Sonst müsste man zum Proben immer wieder von vorn beginnen.
• <audio> Geschwindigkeit regelbar (leider noch nicht die Tonart regelbar)

Neueste Studie: Kalles Liederbuch TEST - ersetze example dot org durch osmer dot de

Das Liederbuch wird auf mehrere Geräte (weltweit) geladen. Oben links drei Radio-Knöpfe. Der Chorleiter / Dirigent drückt [master], die Sänger drücken [slave].

Wenn der Master auf ein Teilen-Icon drückt, wird die URL dieses Liedes als Textdatei auf dem Server abgelegt.

Die Slaves rufen alle 5 sec den Server, der schickt die URL und nach sätestens 5 sec haben alle das zu probende Lied vor Augen.

Gerne gebe ich weitere Auskunft, viele der Kniffe wurden mit Hilfe dieses Forums ausgeführt.

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

die einzelnen Lieder im <iframe> erkennen am top.location.href, welche CSS-Datei sie laden müssen um auf A5 oder A6 zu schrumpfen.

Whoa?! Sollte sich das heutzutage nicht auch mit media queries lösen lassen?

Rolf

[Linuchs]

Hallo Rolf,

Whoa?! Sollte sich das heutzutage nicht auch mit media queries lösen lassen?

Verstehe nicht, was du mir sagen willst. Media queries?

Ich erkenne sogar, wenn ein Lied allein (nicht im iframe) geladen wird. Dann mmuss es seine Druck-Ränder selbst verwalten. Im Liederbuch bestimmt top.location, ob es sich um eine gerade oder ungerade Seite handelt.

Linuchs

[Rolf B]

Hallo Linuchs,

das, was Du jetzt beschreibst, ist mehr als

auf A5 oder A6 zu schrumpfen

Sich an eine bestimmte Breite anzupassen und zu skalieren, das sollte per media query auf width machbar sein.

Alles andere ist jetzt Hypothese von mir, von keiner Kenntnis deiner Realitäten beleckt. Aber wenn das Liederbuch die Lieder per iframe einbindet und auf die linke oder rechte Seite setzt, dann sollte die Platzierung des iframe Sache des Liederbuchs sein. Wenn das einzelne Lied in dem Fall seine eigenen Ränder entfernen muss, kann man das über einen Query-Parameter in der URL machen, oder das Liederbuch platziert die iframes so, dass das Lied seine Ränder so setzen kann als wäre es allein auf der Welt.

Rolf