|By: Paul S. Cilwa||Viewed: 7/11/2020
|The biggest programming journey begins with a single file. Or two.|
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.
You can download my test files if you like. Right-click and select Save Link As... as usual.
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>
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: