View Sidebar

A Million Little Pieces Of My Mind

Step 1: Creating the OrganicaAudio Project

By: Paul S. Cilwa Viewed: 7/22/2024
Posted: 11/17/2017
Page Views: 830
Topics: #Computers #Programming #Projects #WebAudioAPI #JavaScript #MusicPlayer #Cross-fadingMusicPlayer #OrganicaAudio
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.)

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>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Organica Audio Test</title>
<script src=""></script>
<script src='OrganicaAudio.js'></script>

<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.


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.