AudioSlides4Web
is a library and NPM module that was created as a online alternative for one export format of PanDocElectron. The WebApp runs completely in a browser without contacting a web server for processing for generating a webbased presentation from slide/images and audio comments as MP3.
The following table of contents is generated with node doctoc README.md
.
- Usage
- Quick Start
- Offline Usage of AppLSAC
- Future modifications
- Build Process of
npm run build
- Build and Compress with Browserify, Watchify, UglifyJS
- Acknowledgement
- Libraries required for
AudioSlides4Web
- Libraries for Building and Developement
- NPM Library Information
First of all try to run the basic online tool to create a ZIP file with folders 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
andimage
. - The folder
audio
contains all the audio comments for the slides. The fileaudio/audio0.mp3
is the audio comment for the slideimages/img0.png
and e.g.audio/audio15.mp3
is the audio comment for the slideimages/img15.png
. - You can record the audio comments with Open Source software Audacity, which you should store in MP3 format.
- Press Download ZIP and you will get the ZIP folder structure with the presentation as
audio_slides.zip
.
- Generate PNG files of you presentation or create a PDF document of your presentation (e.g. HTML export with LibreOffice and you will get the slides as a sequence of image properly enumerated with
img0.png
,img1.png
,img2.png
, .... - Record Audio Comments with Audacity for recording of your comments for the slides and save your audio comments as files
audio0.mp3
,audio1.mp3
,audio2.mp3
, .... - The audio files with
audio2.png
will be mapped to the slideimg2.png
, so save the recorded audio files according to the slide index 2 withaudio2.mp3
. - Start
AudioSlides4Web
directly from the server or download the ZIP-file and unzip the file. The unzipped folder contains adocs/
-folder. This folder contains the relevant WebApp (AppLSAC-2). The other directories are required for building the WebApp (e.g. the foldersrc/
contains the sources for the build processnpm run build
for developers). For offline use just copy thedocs/
-folder, rename the folder toaudioslides4web/
. For starting the WebApp load the fileaudioslides4web/index.html
in a current version of Firefox, Chrome or Safari.
The software AudioSlides4Web
is an HTML5 application. It can be placed on a webserver, but it can be used as an AppLSAC. An AppLSAC can be used offline as well without internet connection, because the software is implemented with Javascript, HTML and CSS and uses the browser just as runtime environment for the code without the need to contact a remote server for processing. So if you use AudioSlides4Web
on https://niebert.github.io/audioslides4web then the slides as PNG images, the audio MP3 files are processed and ZIP in your own browser and saving of the generated ZIP-file is performed by the download feature of browsers.
If you want to use the AudioSlides4Web
-generator locally
- download the
AudioSlides4Web
ZIP-file - extract the ZIP file and
- load the file
docs/index.html
the browser.
For running AudioSlides4Web
you just need the folder docs/
folder in the extracted ZIP file. You can also delete the folder tutorial/
and the folder southampton2019/
as a demo output.
The following options are not implemented yet.
GIF-images can be uploaded into AudioSlides4Web and this allows to use animated slides in the current version.
For this extension of AudioSlides4Web we need to add a button Add Video
and allow uploading Videos in the webm
format and embed that as slide with video into AudioSlides4Web.
Instead of uploading an image as slide another option could be the selection of WikiMedia markdown slides as slide3.wiki
or slide3.md
as text-based slide, that will be converted by a markdown2html
converter or by wtf_wikipedia
into a DZSlides format.
The possible idea of extending AudioSlides4Web will be to use a JSONEditor originally generated and maintained by Jeremy Dorn for storing the generated web-based presentation in a single JSON. With the concept of an AppLSAC we can load and save this presentation in single JSON and modify single slides.
For this extension we create JSON-schema and store that indocs/schema
and a sample JSON data in the folder docs/db/
. to a JSON schema for storing a generated AudioSlides4Web presentation for future modification. If you want to create your own JSON schema use the JSON2Schema tool.
So it necessary to adapt the JSON-schema docs/schema
and the JSON data in the folder docs/db/
to the schema for the requirements of AudioSlides4Web
. If you want to create your own JSON schema use the JSON2Schema tool to generate a rapid prototype of a JSON editor.
The build process is called by npm run build
which in turn call build.js
. If you want to call the build process of build.js
separately just call build.js
with node build.js
from the shell/console.
The templates for building the output are stored in the folder src/
.
After the build process the README.md
is generated and if you want to have the table of contents in the file for the concatenation of files in src/readme/
listed in files4build.js
then you must run the DocToc generator for README.md
by doctoc README.md
from the shell to update the table of contents in README.md
.
The NodeJS modules can use require()
-command. Browsers cannot execute the require()
-command and other node specific programming features.
Browserify
loads the filesrc/main.js
as input file and resolves e.g. therequire()
-command and creates an output file indist/audioslides4web.brows.js
Watchify
observes any changes in the source files insrc/
and starts on the event of changes the build process of the filesrc/main.js
as input file and creates an output file indist/audioslides4web.brows.js
.UglifyJS
compresses the code indist
and takes the filedist/audioslides4web.js
and generates the compressed library indist/audioslides4web.min.js
. The same is applied fordocs/js/audioslides4web.js
and the output isdocs/js/audioslides4web.min.js
. The compression of the source code can be perform without a total build bynpm run compress
.
Browserify and Watchify are used in this repository to control the WebApp-javascript development with the required Javascript libraries installed with NPM Node.js and similar framework world that greatly improve your javascript workflow: Using them, you no longer need to micro-manage your script tags but instead you just declare the libraries each of your client-side modules is using - or you can even create your own reusable modules! Also, installing (or updating) javascript libraries is as easy as running a single command!
- Additional Information about Browserify and Watchify on GitHub
- Youtube Video about Browserify and Watchify by Kyle Robinson Young 2015/04/16 In this repository Browserify and Watchify are used for javascript code development with NPM Node.js.
Requirement: NPM is intalled. Now call for global installation of Browserfy, Watchify, UglifyJS and DocToc by:
npm install -g browserify watchify uglify-js doctoc
This is recommended because your will not install Browserfy, Watchify and UglifyJS for all your repositories separately.
- Browserfy converts
node_modules
in a single library, that can be imported in WebApp. Browserify resolves dependencies and included the required libraries into the bundled javascript code. - Watchify watches changes in the source code and runs the build process whenever it detects changes in the your source code.
- UglifyJS compresses the source code of
dist/class_editor_uml.js
intoclass_editor_uml.min.js
to reduce download time and WebApp performance during load. - DocToc is used to create a helpful table of contents in the README (see [DocToc-Installation]https://github.com/thlorenz/doctoc#installation) for further details on NPM DocToc ). Run
doctoc README.md
for updating the table of contents. - jsLint is used to check the Javascript code, quality of code can be improved by application of jsLint
If your prefer that browserify and watchify is installed with your npm install
command, save these to modules to your dev-dependecies in your package.json
by calling
- (Install Browsersify)
npm install browserify --save-dev
- (Install Watchify)
npm install watchify --save-dev
- (Install UglifyJS)
npm install uglify-js --save-dev
- (Install DocToc)
npm install doctoc -g
- (Install jshint)
npm install jslint -g
The difference between --save
and --save-dev
is, that development dependencies are installed with npm install
because they are required for the development process of the code but they are not added to the generated Javascript-bundle that are used in the WebApp ClassEditorUML. The --save-dev
commands for browserify
and watchify
will install the two modules with all the the dependencies in node_modules
and add the dev-dependencies to your package.json
.
"devDependencies": {
"browserify": "^14.5.0",
"watchify": "^3.9.0",
"uglify-js": "^2.6.2",
"doctoc":"^1.3.0",
"lint": "^1.1.2"
}
In the current repository Browserfy
and Watchify
are expected to be installed globally, because the package.json
does not contain the dev-dependencies mentioned above.
Watchify will trigger the npm run build
process if files were change due to alteration of code. To start watching the files, run the npm-watch script by npm run watch
, which is defined in package.json
The main JS source file for the build process is src/main.js
. The output library (resp. output file of build process) is stored in distrubtion library for browser based web-development in dist/audioslides4web.js
. Compressed code is generated with UglifyJS
. It takes the dist/audioslides4web.js
as input file and creates the compressed file dist/audioslides4web.min.js
.
The compression of dist/audioslides4web.js
into dist/audioslides4web.min.js
uses uglify-js
module and can be started by
npm run compress
Special thanks to the following individual developers and teams of OpenSource JavaScript projects:
- DZSlides by Paul Rouget is the used as underlying framework for the webbased presentation. Without Pauls contribution this tool
AudioSlides4Web
would not exist. - HandleBars is used for the HTML generation for the slides in
index.html
of generated ZIP-file ofAudioSlides4Web
. - JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the JavascriptClassCreator Project
JSCC
. The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction ofJSCC
. Refactoring ofJSCC
would make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/ - Font Awesome Icons - 4.7.0 thanks to fontawesome.com for providing the free 4.7.0 version for local application for this WebApp. The fonts in version 4.7.0 are created by Font Awesome and licensed under SIL OFL 1.1. The javascript-code for injecting the icon into the DOM licensed under MIT License. The Documentation for Font Awesome - 4.7.0 licensed under CC BY 3.0.
- Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
- The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
- Developers of ACE Code Editor https://ace.c9.io (Javascript Editing uses the Editor in iFrames)
- LoadFile4DOM is a library that allows to load files into an application that run completely in a browser without the need to submit data to a server for processing. With this library the users are able load files into your browser application and process the data in the browser and provide the output to the user, without submitting any data to a server. Demo LoadFile4DOM
- FileSaver.js Developer Eli Grey provided the
FileSaver.js
that is used to store createdJSCC
files to the local filesystem.JSCC
uses the same mechanism of browsers, that allows aSave as...
in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML). - JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
- Inheritage for JavaScript with protoypes by Gavin Kistner
- 3 ways to define a JavaScript class by Stoyan Stefanov
- JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.
- JSZip - LibreOffice files, Geogebra files (Open Source applications) have file extensions that are actually ZIP files. To handle, change and generate those documents in a browser is possible the library JSZIP. Even a small file system for WebApps that can be stored with a folder structure in a ZIP file can be generated in a browser. So JSZip is a multi-functional JavaScript class for generating and reading ZIP files. Thank you for sharing this great library with the Open Source community.
The following libraries are necessary for audioslides4web.js
:
The following libraries are necessary for building the audioslides4web
.
These libraries are not included in audioslides4web.js
, but e.g. are required in build.js
.
- Lib:
browserify
Version:^14.5.0
- Lib:
build4code
Version:^0.3.30
- Lib:
concat-files
Version:^0.1.1
- Lib:
doctoc
Version:^1.3.0
- Lib:
lint
Version:^1.1.2
- Lib:
shelljs
Version:^0.8.4
- Lib:
uglify-js
Version:^2.6.2
- Lib:
watchify
Version:^3.11.1
- Exported Module Variable:
AudioSlides4Web
- Package:
audioslides4web
- Version:
2.1.1
(last build 2020/11/17 19:22:10) - Homepage:
https://github.com/niebert/audioslides4web#readme
- License: MIT
- Date: 2020/11/17 19:22:10
- Require Module with:
const vAudioSlides4Web = require('audioslides4web');
- JSHint: installation can be performed with
npm install jshint -g