PanDocElectron/AudioSlides4Web

In dieser Lernressource lernen Sie, eine Audio-Präsentation für das Web im HTML-Format mit einer WebApp zu erstellen, die innerhalb des Browsers ausgeführt wird, ohne Daten an einen Server zu senden. Ein sogenannte AppLSAC kann ihre Webpräsentation auch offline (ohne Internetzugang) erstellen. Dabei wird der Browser als Laufzeitumgebung für die Erstellung der HTML-Präsentation verwendet.

Web Page of AudioSlides4Web

Audacity - Aufnahme von Audiokommentaren zu Folien

AudioSlides4Web erstellt eine ZIP-Datei mit Ordnern für Bilder und Audio-Kommentare, die für jede Folie aufgenommen werden, z.B. für Wiki2Reveal. Eine generierte HTML-Datei bettet Folien und Audio-Player für die Folien ein. Die Folien können für Offline-Präsentationen in einem Web-Browser oder online für den asynchronen Zugriff auf Web-Präsentationen mit Audio-Kommentaren verwendet werden.

In dieser Lernressource erfahren Sie, wie man webbasierte Präsentationen erstellt, die offline verwendet werden können. Bilder und Diagramme aus WikiCommons können als Folien in den Präsentationen verwendet werden.

Lernaufgabe

• (AudioSlides4Web Tutorial) Schauen Sie sich das AudioSlides4Web Tutorial an, um mehr über die Erstellung einer webbasierten Präsentationen mit Audiokommentaren zu erfahren. Das Tutorial ist dabei selbst ein AudioSlides4Web-Beispiel, so dass Sie zugleich sehen können, wie ein Endprodukt aussehen wird und wie es von den Nutzerinnen und Nutzern verwendet werden kann. Navigieren Sie mit den Cursorbuttons durch die Onlinepräsentation zu nächsten ">" bzw. zur vorherigen "<" Folie.
• (Erster Test mit existierenden Bildern und Audiodateien) Verwenden Sie 3 Bilder Ihrer Wahl und wählen Sie 3 mp3 Dateien (z.B. aufgezeichnete Audio-Kommentare zu den Bildern) und erstellen Sie Ihre erste webbasierte Präsentation mit AudioSlides4Web als AppLSAC-1.
• (Beispielpräsentation) Ein weiteres vollständige Beispiel für eine generierte Präsentation mit Audiokommentaren ist ebenfalls in dem Repository enthalten.

Schritte zu einer webbasierten Präsentation

Aufgrund der Tatsache, dass diese Lernressource den Open Community Approach unterstützt, wird nur Open Source Software verwendet.

Office-Präsentation in LibreOffice erstellen/laden

• Erstellen Sie Ihre Folien wie gewohnt mit LibreOffice Beeindrucken oder importieren Sie Ihre P0WERP0INT-Präsentation in LibreOffice.
  • Mit LibreOffice können Sie nach HTML exportieren und Sie erhalten die Folien mit den richtigen Erweiterungen direkt,
  • Es ist auch in jeder Anwendung möglich, Screenshots von jeder Folie zu machen und diese unter img0.png, img1.png, img2.png,, ... oder
  • oder Sie können Ihre P0WERP0INT-Präsentation auch in LibreOffice öffnen.
• Alternative können Sie auch eine Liste von existierenden Bilddateien verwenden und die durch entsprechende Verwendung von Dateinamen in eine Ordnung bringen z.B. img0.png, img1.png, ....

Audio-Kommentare in Audacity aufnehmen

Nehmen Sie Ihre Audio-Kommentare mit OpenSource-Software Audacity (Download: Audacity) auf und speichern Sie die Dateien audio0.mp3, audio1.mp3, audio2.mp3, .... Der Audiokommentar audio0.mp3 ist der Kommentar für die Titelseite img0.png (siehe Audacity Software). AudioSlides4Web wird versuchen, den Folienindex und den Index des Audiokommentars im Dateinamen zu erkennen, d.h. audio_comment12_methodology.mp3 wird als Audiokommentar für die Folie mit dem Index 12 interpretiert. Es wird daher empfohlen, Zahlen im Basisnamen der Audiokommentaren als Verweis auf den Folienindex zu verwenden. Die Zahl in den Erweiterungen .mp3 ist für die Berechnung des Folienindex irrelevant.

Zahlen in Dateinamen

Wenden Sie dieses Prinzip der Zahlen in den Dateinamen auch auf die Bilder/Folien an und vermeiden Sie Dateinamen wie audio_comment_for_year2019.mp3, da dies als Audiokommentar für die Folie 2019 betrachtet wird.

Normalisierung und Kompression der Audioaufnahme

Die Aufnahme der Kommentare ist ggf. in unterschiedlicher Lautstärke erfolgt. Damit der Nutzer der Webpräsentation die Lautstärke nicht bei den Folien nachregeln muss, sollte darauf achten, dass die Lautstärke in allen Audiokommentaren ungefähr die gleichen Ausschläge hat. Dazu geht man wie folgt vor:

• Markieren Sie mit der Maus die gesamte aufgenommene Audiospur und normalisieren die Spur unter dem Menüpunkt Effekt/Normalisieren in Audacity.
• Dabei wird der maximale Ausschlag des Lautstärkereglers normalisiert. Wir der maximale Ausschlag durch einen lauten Klick festgelegt, ist ggf. die Aufnahme immer noch zu leise. Falls ein optischer Vergleich der Kurven für das Audiosignal (blauer Audiotrack) zu leise erscheint, kann man Effekt/Verstärken die Lautstärke noch einmal anpassen.
• Effekt/Kompression hilft ferner dabei die Lautstärkeunterschiede in einem Audiotrack anzupassen.

Insgesamt ergibt sich daher in der Regel die folgende Anwendung von Audioeffekten auf die Audioaufnahme.

• Effekt/Normalisieren...
• Effekt/Kompression... und
• Effekt/Verstärken... (optional)

Kombinieren Sie Audio und Folien mit AudioSlides4Web

Kombinieren Sie Audio-Kommentare und Bilder der Folien mit AudioSlides4Web. Das Tool wird für die Lernressource erstellt und erstellt eine ZIP-Datei der Audiokommentaren und Folien. Für die Erstellung der Audio-Folien werden keine Folien/Bilder oder Audio-Kommentare an einen Server übermittelt. Die Verarbeitung erfolgt innerhalb des Browsers. Siehe nächster Abschnitt für weitere Details.

Online-Werkzeug

Starten Sie zunächst das grundlegende Online-Tool unter https://niebert.github.io/audioslides4web in Ihrem Browser, um mit diesem Werkzeug eine ZIP-Datei für die Webpräsentation zu erstellen. Die ZIP-Datei enthält alle notwendigen Ordnern, Audiokommentaren, Folien und einer HTML-Datei index.html, die Sie entweder auf eine Webserver laden können und mit der Lernenden in einem Browser Ihre Folien (PNG-Dateien) mit den zugehötigen Audiokommentaren als HTML-Präsentation anschauen können. Als zugrundeliegendes HTML-Präsentationsframework wurde das unter DZSlides bekannte Präsentationstool verwendet, um ein speicherplatzsparendes Framework mit einer einzigen Datei zu erhalten. Dabei wir angenommen,

• dass die einzelnen Folien der Präsentation als Bilddateien vorliegen (LibreOffice kann auch Powerpoint-Präsentationen einladen und mit dem HTML-Export als Liste von PNG-Datein erzeugt.
• Audiokommentare können Sie mit dem OpenSource-Werkzeug Audacity aufnehmen.

Liegen Ihnen Bilddateien und Audiokommentare im OGG- oder MP3-Format, können Sie bei der Erstellung wie folgt vorgehen:

• Starten Sie das Online-Tool AudioSlides4Web mit https://niebert.github.io/audioslides4web.
• Füllen Sie die Folieninfo aus - achten Sie auf die Anzahl der Folien - die Nummer der ersten Folie ist standardmäßig 0 und die der letzten Folie ist standardmäßig 40. Dia 0 ist die Titelseite, aber Sie können die Dia-Nummer auf 1 ändern.
• Passen Sie den Namen der Präsentation an. Der Präsentationsname wird als Basisname für die HTML-Präsentation und auch für die ZIP-Datei verwendet.
• Die ZIP-Datei enthält zwei Ordner audio und bild.
• Der Ordner audio enthält alle Audio-Kommentare zu den Folien. Die Datei audio/audio0.mp3 ist der Audiokommentar für die Folie images/img0.png und z.B. audio/audio15.mp3 ist der Audiokommentar für die Folie images/img15.png.
• Sie können die Audiokommentare mit Open-Source-Software Audacity aufnehmen, die Sie im MP3-Format speichern sollten.
• Drücken Sie auf Download, um die generierten Folien mit Audiokommentaren als ZIP-Datei herunterzuladen. Die entpackte ZIP-Datei erzeugt einen Ordner, der die gesamte Webpräsentation mit Folien und Audiokommentaren enthält.

Wikiversity

Dieses Repository wurde im Rahmen eines Wikiversity-Kurses für Audio Slides entwickelt, d.h. eine schlanke webbasierte Präsentation mit Audiokommentaren und Bildern als Folien, die im Vergleich zu Youtube-Videos in bandbreitenbeschränkten Umgebungen eingesetzt werden können (siehe Wikiversity AudioSlides4Web).

Verwendete Bibliotheken und Templates für Audio4Web

Die folgenden Bibliotheken werden für das Repository verwendet:

• DZSlides von Paul Rouget - Open Source Webpräsentation in das AudioSlides4Web exportiert.
• Editor ACE zur Bearbeitung des generierten Quellcodes.
• Handlebars4Code - siehe Demo von Handlebars4Code wird für die vorlagengesteuerte Dokumentgenerierung verwendet.
• LinkParam - siehe Demo von Handlebars4Code - siehe Demo von Handlebars4Code.
• LoadFile4DOM - zum Laden von Dateien mit einem Browser.
• JSZip - zum Komprimieren mehrerer Dateien und Ordner in eine ZIP-Datei innerhalb eines Browsers.
• FileSaver.js - zum Speichern von Dateien (hier eine ZIP-Datei), die im Browser erzeugt wurden. FileSaver.js verwendet die Download-Funktion von Browsern, um die generierte ZIP-Datei dem Benutzer zur Verfügung zu stellen, aber die Datei wird nicht von einem entfernten Server geholt, daher wird FileSaver.js verwendet, um einen Download mit im Browser generierten Daten zu erstellen.

Siehe auch

• Audacity - Aufnahme von Audiokommentaren zu Folien (Download: https://www.audacity.de/)
• ZIP Dateiformat]
• AppLSAC für datenschutzfreundliche Offline-WebApps
• DZSlides-Vorlage auf GitHub von Paul Rouget
• Videokonferenz/Lasttest - AudioSlides4Web als schlankere Alternative für Videokonferenzen
• Wiki2Reveal