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.
Web Page of AudioSlides4Web
Audacity - Record Audio Comments for Slides with Audacity

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


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):

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 (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
  • 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.



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.

See also