How to Use Javascript to Play an MP3 File

There are a number of possible ways to embed and play MP3 audio files on your Web pages. The deprecated “embed” tag in HTML, various Flash players, and Java-based players are all examples. The HTML5 standard, with its emphasis on scripting and its lack of reliance on third-party software, offers the most compatible way to embed and play MP3s on Web pages going forward. Embed the MP3 file with the HTML5 “audio” object, and then use a JavaScript function to start it playing.

Step 1
Add the following code to the body of your HTML document:

 

This code embeds and loads the MP3 file, but does not play it. The value of the “src” tag contains the path to and filename of the MP3 file.

Step 2
Add the following JavaScript code between the “head” tags of your HTML document:

 

This function, when called, accesses the “audio” element by its id (“mp3”), and uses the method play() to play it.

Step 3
Add a button to the Web page to call the “playMusic” function when the user clicks it. Add the following code to the body of the HTML document:

 

Change the “value” attribute to give the button a different title.

Step 4
Use the following function instead of “playMusic” to let the user pause the file after starting it:


Change the “onClick” attribute of the “input” tag in Step 3 to match this function’s name.

You may also like...