Modern browsers provide full support for music and video playback through HTML5 and JavaScript. However, it may take some time to implement all the specifications and study all the APIs.
Also, building cross-browser music components is not a trivial task. That's why I strongly recommend that you look for existing third-party components—freeware or commercial—that already encapsulate the features we need to use.
For our project, we are going to use AmplitudeJS, the HTML5 audio player for the modern era. It requires no external dependencies:
Follow these steps to add a music player component:
- First, install the AmplitudeJS JavaScript library using the following NPM command:
npm i amplitudejs
Although you can write JavaScript in the HTML document by using script tags, it's good practice to keep the scripts separate from the presentation layer.
- Let's separate the concerns and introduce a new file called player.js. This file is going to hold all the code that is related to the music player's implementation and playback. Create the player.js file with the following stub content:
// player.js
// todo: player configuration
- Now, update the index.html file and include the newly created player.js file at the bottom of the body, after the amplitude.js import.
- The file's content should look as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Music Player</title>
</head>
<body>
<h1>Music Player</h1>
<script src="./node_modules/amplitudejs/dist/amplitude.js">
</script>
<script src="./player.js"></script>
</body>
</html>
At this point, we have an Electron application that loads and initializes the Amplitude library at startup. We also loaded our custom script file, player.js, after the amplitude.js file. This allows us to access all the multimedia APIs that are exposed by the third-party component library.
Now, it's time to grab some music files to test the application.