How to Use Javascript to Play an MP3 File

Techwalla may earn compensation through affiliate links in this story.
Use a JavaScript function to let website visitors play an MP3.

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

Advertisement

Step 1

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

Video of the Day

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:

Advertisement

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:

Advertisement

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.

Advertisement

references