# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm star
telectron-quick-start
- index.html
- main.js
- package.json
- render.js
index.html
which is simply an HTML5 web page and it serves one big purpose: our canvasmain.js
creates windows and handles system eventspackage.json
similar to Node.js’ modules, is the startup script of our app, which will run in the main process and it contains information about our apprender.js
is responsible for hosting the app’s render processesfor loop
that increments something in one of my render processes.main.js
, like in our case, but it can have whatever name you’d like.package.json
file. 'main': 'main.js',
'main': 'mainTest.js',
electron-quick-start
to hear-me-type-tutorial
.package.json
file.package.json
contains vital information about our app like its name, version, main file, author, license and so much more.'author'
parameter and change it’s value to your name. It should look like this:'author': 'Carol Pelu',
npm start
in your bash to execute the app and see the changes you’ve made.audio
element with specific id
s for the keyboard keys that we want. Then we will create a switch
statement to find out which keyboard key has been pressed, then play a specific sound of that key.index.html
file and let’s create the <audio>
elements in order to embed the sound content in our app.<body>
element, create a div
element with the “audio” class
tag.div
element, create an <audio>
element with an id
of “A”, the source
tag of “sounds/A.mp3” and with a preload
attribute of “auto”.preload='auto'
to tell the app that it should load the entire audio file when the page loads. index.html
being the main file of the app, all of our sound files will be fully loaded when the app executes.<audio>
is pointing to an unknown source file. Let’s create a folder called sounds
and unzip all the sound files inside the folder.functions.js
and let’s require it within the index.html
file so that the JS code is ready for use when the app is running.require(./renderer.js')
, right under it add this line of code:require('./functions.js')
functions.js
file and add the following JavaScript code into the file. I’ll explain how it works in just a moment.npm start
to run the app.onkeydown
event on the document
object to find out which HTML element is being accessed within the document
object which is in fact our app’s main window.switch
statement whose purpose is to identify the Unicode value of the pressed keyboard key.index.html
and create an <audio>
element for every key that we have a sound file for.functions.js
.index.html
file you can change the app’s title and the content that you want to be shown in the main window.functions.js
file I have used a deprecated JavaScript event.