| By: Paul S. Cilwa | Viewed: 5/12/2024 Posted: 11/17/2017 |
Page Views: 735 | |
| 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>
<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.