How to add multiple audio players to one webpage

This tutorial will guide you how to add multiple audio players to one webpage.

Step 1 - Create multiple audio players width different ID in Amazing Audio Player

To insert multiple audio players to one webpage, you need to create each player with a unique ID. In Amazing Audio Player, make the following change in the Publish dialog:

  • Select a unique ID for each player
  • If you are saving the player to same folder, specify a unique filename for each player.

Create HTML5 audio player

Step 2 - Copy or upload all of the generated files to your web server

In this step, you need to copy or upload all of the generated files to your web server. They need to be placed in the same folder as your webpage.

HTML5 Audio Player

Step 3 - Insert HTML codes to head section

Open the generated HTML files from local hard disk with a text editor or HTML editor. Copy the HTML codes in the head section, then paste the codes to your webpage before </head> tag.

You need to remove the duplicated references to jquery.js file and amazingaudioplayer.js from the second player codes.

HTML5 audio player

Last step - Insert the HTML codes of body section to where you want to display the audio player

The last step is to copy the body section HTML codes from the generated HTML file, and paste it to your webpage where you want to display the player.

HTML5 audio player on webpage