8. Sound Machine Project

HTML

This project includes the HTML 5 audio tag. This is new to version 5 of HTML.

The tag used is <audio> </audio>

Inside the audio tag, you place a source tag. The source contains a reference to the audio file you wish to play. The source tag should include two attributes

1. The src which should include the name of the audio file. If the audio file is in a subfolder, the it should be subfolder/audiofile.mp3
2. The type should be included. The audio tag can include 3 types:

a. mp3 which is audio/mpeg b. ogg which is audio/ogg c. wav which is audio/wav

Example: `

`

You can include more than one source, but only the first will be played.

Notice the controls attribute inside the audio tag. This tells the browser to show the default controls which look ok but if you were developing polished software, you might want to exclude this and instead include your own buttons and user interface. After you have learned the basics here, you can click here for a tutorial on how to create a custom interface.

The above example will show an audio control and play the door.mp3 file located in a subfolder named sounds.

To make things a little more interesting, the project includes a select tag which includes a list of mp3 files which can be selected and played.

<select id="audioSelection" class="form-control"> <option value="airplane.mp3">Airplane</option> <option value="car.mp3">Car</option> <option value="chime.mp3">Chime</option> <option value="door.mp3" selected>Door</option> <option value="fart.mp3">Fart</option> <option value="modem.mp3">Modem</option> <option value="musicbox.mp3">Music Box</option> <option value="toy.mp3">Toy</option> <option value="train.mp3">Train</option> <option value="wind.mp3">Wind</option> </select>

The above is very similar to the previous Paddy's Day project where you could select different images to rain from the sky.

The html code can be viewed here

JavaScript

Some JavaScript is now needed to change the source for the audio tag based on the option selected.

Firstly, we use jQuery to include a function to do some work when the document loads: $(document).ready(function () { });

Then we declare three variables which reference the Audio, the Source and the Select tags. This is always good practice to declare variables at the start of coding. var audioPlayer = $("#audioPlayer"); var audioSource = $("#audioSource"); var audioSelection = $("#audioSelection");

The next two variables are used to store the folder location where the sounds are stored and the selected sound to play. var folder = "sounds/"; var sound = "";

When the page has loaded, we need to get the current selection and load it into the audio player. The sound variable is a combination of the folder name and the value of the selected option e.g. sounds/airplane.mp3. Then we replace the value for src in the Source tag with the value for audioSelection. Finally we load this into the audioPlayer.

sound = folder + $("#audioSelection option:selected").val(); audioSource.attr('src', sound); audioPlayer.load();

Putting all this together:

$(document).ready(function () { var audioPlayer = $("#audioPlayer"); var audioSource = $("#audioSource"); var audioSelection = $("#audioSelection"); var folder = "sounds/"; var sound = ""; sound = folder + $("#audioSelection option:selected").val(); audioSource.attr('src', sound); audioPlayer.load(); });

There is one last piece of code. The audio tag now includes the first selection from the list when the page loads. In order to apply a selection which the user picks, we need to include the jQuery .change function.

audioSelection.change(function () { sound = folder + $("#audioSelection option:selected").val(); audioSource.attr('src', sound); audioPlayer.load(); });

The above function should be placed inside the $(document).ready function.

The JavaScript code is available to view here

The Code

The full code is available from here