How to add an audio player and a slideshow to the same webpage

Posted on by

This tutorial will show you how to add an audio player created with Amazing Audio Player and a slideshow created with Amazing Slider to the same webpage.

There are three steps in this tutorial:

  • Step 1 – Create an audio player and a slideshow, copy or upload the generated files to the web folder
  • Step 2 – Add HTML code to head section
  • Step 3 – Add HTML code to body section

At the end of this tutorial, we will also discuss how to add multiple audio players and multiple slideshows to the same webpage.

Step 1 – Create an audio player and a slideshow, copy or upload the generated files to the web folder

Firstly please create an audio player with Amazing Audio Player and a slideshow with Amazing Slider, then copy or upload all of the generated files and folders to the web folder.

Amazing Audio Player will generate one HTML file and two folders. You need to copy or upload all of them to the same folder as the webpage where you want to display the player.

html5-audio-player-tutorial-created-files

Amazing Slider will also create one HTML file and two folders. You also need to copy or upload them to the same folder as the webpage.

jQuery slider files

Step 2 – Add HTML code to head section

Open the generated HTML file audioplayer.html and slider.html from local hard disk with a text editor or HTML editor. Copy the HTML code snippets in the head section, then paste them to your webpage before </head> tag.

When adding the code, remove the duplicated reference to jquery.js in the second code snippet.

In short, there should be only one line of jquery.js in the webpage, and it should be placed before all other scripts.

audio-player-slideshow-head-code

Step 3 – Add HTML code to body section

In the generated HTML file audioplayer.html and slider.html, copy the HTML code snippets from the body section and paste them to your webpage where you want to display the player and the slideshow.

slider-html-code

audio-player-html-code

How to add multiple audio players and multiple slideshows to the same webpage

To insert multiple audio players to one webpage, in Amazing Audio Player, the Publish dialog, specify a unique filename and and select a unique ID for each player.

multiple-audio-player-publish

In Amazing Slider, the Publish dialog, specify a unique filename and and select a unique ID for each slider.

multiple-slider

When adding the head section code snippets, make the following changes to the head section code snippets:

  • Remove the line jquery.js from the second and after player and slider code snippets
  • Remove the line amazingslider.js from the second and after slider code snippets
  • Remove the line amazingaudioplayer.js from the second and after player code snippets

In short, there should be only one line of jquery.js in the webpage, and it should be placed before all other scripts.

And there should be only one line of amazingslider.js and one line of amazingaudioplayer.js, and they should be placed before all slider scripts and audio player scripts accordingly.

multiple-slider-player