By: Paul S. Cilwa Viewed: 7/23/2018
Posted: 11/17/2017
Topics/Keywords: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI Page Views: 322
The biggest programming journey begins with a single file. Or two.

There are any number of web-page editing editors, as well as dedicated JavaScript editors, out there. You can use your favorite. But you can also use as simple a tool as Notepad to write a web page and/or JavaScript library. Firefox (my preferred browser) allows me to test JavaScript without having to upload or publish anything, anywhere.

The project name is Organica Audio. (Organica is a large-scale project I'm working on; Organica Audio fits in as a component of that. Hence the name.) So start by creating a project folder by that name.

In that folder we'll place four files: An HTML file to serve as a test bed, the JavaScript file that will contain the library, and two small MP3 files to demonstrate with. (I've taken a couple of tracks from my album but truncated them to about 20 seconds for test purposes.)

You can download my test files if you like. Right-click and select Save Link As... as usual.

The JavaScript library file, OrgranicaAudio.js, is empty at this point, just a placeholder.

In the HTML file we only need the HTML framework for now. Here's the initial contents of the audiotest.html file:


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Organica Audio Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='OrganicaAudio.js'></script>
</head>

<body style='background-color: aquamarine; text-align: center'>
<h1>Let's test the Web Audio API!</h1>

<audio controls id="Song1">
	<source src="COBOLin'.mp3">
	Your browser does not support the audio element.
</audio>

</body>
</html>

In the <head> section, we have to include the common jquery library. We also include the OrganicaAudio.js JavaScript library file, even though there's nothing yet in it.

The page makes use of the HTML5 <audio> tag, twice, once for each MP3 test track. You can load this page (by dragging it onto Firefox, for example) and it should look more or less like this:

Now, there's no JavaScript code actually attached at this point to the page; so the button doesn't do anything. But the <audio> tags are fully operational (assuming you are running a current version of Firefox) so you can test to make sure everything is working so far by simply trying to play either (or both) of the available tracks.