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.
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.
- Use 3 images of your choice and select 3
mp3files (e.g. recorded audio comments for the images) and create your first webbased presentation with AudioSlides4Web as AppLSAC-1.
- Explore an example of a generated presentation with audio comments for the ESA conference in Southhampton 2019.
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
- or you can also open your P0WERP0INT presentation in LibreOffice.
Record Audio Comments in Audacity
Record your audio comments with OpenSource software Audacity and save the files
.... 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.
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
- The folder
audiocontains all the audio comments for the slides. The file
audio/audio0.mp3is the audio comment for the slide
audio/audio15.mp3is the audio comment for the slide
- 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
JSZipwithin 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).
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 with a browser.
- 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.jsuses 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.jsis used to create a download with data generated in browser.