How to Use Javascript to Play an MP3 File

A number of ways are possible 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

...
Use a JavaScript function to let website visitors play an MP3.

Step

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

Step

Step

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

Add the following JavaScript code between the "head" tags of your HTML document:

Step

Step

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

Step

Add a button to the Web page to call the "playMP3" function when the user clicks it. Add the following code to the body of the HTML document:

Step

Step

Change the "value" attribute to give the button a different title.

Step

Use the following function instead of "playMP3" to let the user pause the file after starting it:

Step

function playpauseMP3(){ if(document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); } }

Step

Change the "onClick" attribute of the "input" tag in Step 3 to match this function's name.