How to Use Javascript to Play an MP3 File

By Michael Carroll

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

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 "playMP3" 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 "playMP3" to let the user pause the file after starting it:function playpauseMP3(){ if(document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); }}Change the "onClick" attribute of the "input" tag in Step 3 to match this function's name.