Spice up your life… with some MP3 🎶

This article will walk you through adding a downloaded mp3 to your application with HTML and or JavaScript

First, find an audio that you would like to add to your app — make sure that it is downloadable.

HACK TIP: If you can’t find a website that allows you to download a free audio, go to YouTube to MP3 Converter; this will allow you to copy and paste the YouTube link and convert that video into an MP3 audio. From there, you can download the MP3.

Second, once you download the audio which should be in an .mp3, .ogg or .wav format, you will need to find the file in which you saved it. If you are using a Mac OS X, it generally gets saved to your Downloads folder.

You can locate this folder in your Finder

Third, after locating your audio in the Downloads folder; in another window, open the folder in which your application resides in(I suggest creating a folder called ‘tracks’ or ‘audio’ within your application. Drag the audio you want to use from Downloads into that folder.

Similarly to an <img src> tag, you can create an <audio src> tag in your HTML, then link the path of your audio. Add in “controls” so that you can give the user the ability to pause, play and lower the volume.

This audio tag will reside in your HTML or JS —
Controls — give users ability to interact with the audio
Automatically plays the audio — no accessibility to play with the controls

HACK TIP: You also don’t necessarily have to download an MP3, you can also use an audio link as well. However, if that audio link gets broken in the future, be aware that it will also be broken in your application, whereas if it gets downloaded and saved into your local environment, it will most likely be there forever.

Audio formats that should work with this src tag are: OGG, MP3 and WAV. If you use OGG audio, you must specify within your code that it is an OGG. Make sure whatever format of audio you are using, it corresponds with the browser you are hosting on as well. Check out the W3School link below for a list of specifications of each browser’s support.

To err on the safe side, I would suggest using an MP3 formatted audio as every browser supports it.

If using OGG, specify that it is OGG in your tag.

Sources: W3Schools

Software Engineer || Forever Student