PanDocElectron/AudioSlides4Web

In this learning resource you will learn to create an Audio Presentation for Web in HTML format with an privacy friendly WebApp, that runs within the browser, without submitting.

AudioSlides4Web creates a ZIP with folder for images and audio comments that are recorded for each slide, e.g. for Wiki2Reveal. A generated HTML file embeds slides and audio players for the slides. The slides can be used for offline presentations in a web browser or online for asynchronous access to web presentations with audio comments.
AudioSlides4Web-Tutorial Learn how to create your own web-based presentation with audio comments. The tutorial is itself a AudioSlides4Web presentation with animated GIFs as slide images.

In this learning resource you will learn about creating web based presentations, that can be used offline. Images and diagrams from WikiCommons can be used as slides in the presentations.

Examples of AudioSlides4Web

Loading of Audio and and Slides will take a bit of time into the browser.

Learning Task

(AudioSlides4Web Totorial) Watch the AudioSlides4Web Totorial to learn about the generation of a webbased presentation with audio comments. The tutorial is itself a AudioSlides4Web example, so that you can see how a final product will look like. Navigate with with cursor buttons through the presentation ">" "<".
(First Test with exisiting images and mp3 audiofiles) Use 3 images of your choice and select 3 mp3 files (e.g. recorded audio comments for the images with Audacity) and create your first webbased presentation with AudioSlides4Web as AppLSAC-1.
(Conference Presentation Example) Explore an example of a generated presentation with audio comments for the ESA conference in Southhampton 2019.
(GIF-Animations as Slides) Explain how you can use animated GIFs as slide images to visualize processes.

Steps towards an Web-based Presentation

Due to the fact that this learning resource supports the Open Community Approach only Open Source Software is used.

Create/Load Office Presentation in LibreOffice

Create your slides as usual with LibreOffice Impress or import your P0WERP0INT presentation in LibreOffice.
- With LibreOffice you can export to HTML and you will get the slides with the correct extensions directly,
- It is also possible in any application to make screenshots of each slide and save them to img0.png, img1.png, img2.png,, ... or
- or you can also open your P0WERP0INT presentation in LibreOffice.

Create PDF Presentation in Landscape Format

Many software products can export PDF documents in landscape format. The following software packages are OpenSource software so that learners can use these products in this learning resource without any financial barriers (Open Community Approach):

LaTeX beamer slides,
LibreOffice/OpenOffice, Draw, Impress, ...
Inkscape Vector Graphics editing
GIMP Graphic Image Manipulation Program
Scribus Desktop Publishing

You can use the PDF document in landscape format just in AudioSlides4Web and select the slides that you need for your presentation.

Record Audio Comments in Audacity

Record your audio comments with OpenSource software Audacity and save the files audio0.mp3, audio1.mp3, audio2.mp3, .... The audio comment audio0.mp3 is the comment for the title page img0.png (see Audacity Software). AudioSlides4Web will try to recognize the slide index and the index of the audio comment in filename, i.e. audio_comment12_methodology.mp3 will be interpreted as audio comment for the slide with index 12. So it is recommended to use numbers in the basename of audiocomments as reference to the slide index. The number in extensions .mp3 is irrelevant for the calculation of the slide index.

Remark: Apply this principle of numbers in the filenames also on the images/slides and avoid filenames like audio_comment_for_year2019.mp3, because it will be regarded as audio comment for slide 2019.

Combine Audio and Slides wit AudioSlides4Web

Combine audio comments and images of the slides with AudioSlides4Web. The tool is created for the learning resource and creates a ZIP file of the audio comments and slides. For the generation of the audio slides, no slides/images or audio comments are submitted to a server. The processing is performed within in the browser. See next section for more details.

Normalization and Compression of the Audio Recording

Comments for slides may have been recorded with different volumes. To avoid the user of the web presentation having to adjust the volume of the slides, make sure that the volume in all audio comments has nearly the same level. This can be accomplished as follows:

Mark the entire recorded audio track with the mouse and normalize the track under the menu item Effect/Normalize in Audacity.
This will normalize the maximum peak of the volume control. If the maximum level is set by a loud click, the recording may still be too quiet. If a visual comparison of the curves for the audio signal (blue audio track) appears to be too quiet, you can adjust the volume again by clicking Effect/Amplify....

Effect/Compression also helps to adjust the volume differences in an audio track. Overall, this usually results in the following application of audio effects to the audio recording.

Effect/Normalize...
Effect/Compression... and
Effect/Amplify... (optional)

Translated with www.DeepL.com/Translator (free version)

Online Tool

First of all try to run the basic online tool to create a ZIP file with folders, audio comments, slides and HTML file that embeds a images (PNG-Files) in an HTML presentation. As underlying HTML presentation framework DZSlides was used to have a light weight framework with a single file.

Start the Online Tool AudioSlides4Web with https://niebert.github.io/audioslides4web
Fill out the Slide Info - take care about the number of slides - First slide number is by default 0 and last slide is by default 40. Slide 0 is the title page, but you can alter the slide number to 1.
Adapt the presentation name. The presentation name will be used as basename for the HTML-presentation and for the ZIP file too.
The ZIP file contains two folders audio and image.
The folder audio contains all the audio comments for the slides. The file audio/audio0.mp3 is the audio comment for the slide images/img0.png and e.g. audio/audio15.mp3 is the audio comment for the slide images/img15.png.
You can record the audio comments with Open Source software Audacity, which you should store in MP3 format.
Press Download Generated Slides as ZIP. The zip-folder is generated with JSZip within the browser.

Wikiversity

This repository was developed in the context of a Wikiversity course for Audio Slides, i.e. lean webbased presentation with audio comments and images as slides, that can be used in bandwidth limited environments in comparison to Youtube videos (see Wikiversity AudioSlides4Web).

Used Libraries

The following libraries are used for the repository:

Editor ACE to edit the generated source code.
Handlebars4Code - see Demo of Handlebars4Code is used for template driven document generation.
LinkParam - see Demo of Handlebars4Code
LoadFile4DOM - for loading files into browser as runtime environment instead of leading on a remote server (Offline use of AudioSlides4Web together with optional offline use of presentation - bandwidth limitation during videoconferencing).
JSZip - for compressing several files and folders into a ZIP-file within a browser.
FileSaver.js to save files (here a ZIP-file) generated in the browser. FileSaver.js uses the download feature of browsers to provide the generated ZIP file to the user, but the file is not fetch from a remote server, so FileSaver.js is used to create a download with data generated in browser.