JS Animated. How to change and add mp3 tracks (based on template #58018)

This tutorial will show you the way to change existing and add new mp3 tracks in HTML based template.

Some of the HTML templates come with built-in audio player. Look for the /js/audiojs/ directory inside of your template package. If such exists, be sure your template comes with an active audio player:

To change existing .mp3 tracks

1. Open .html page that contains .mp3 tracks with any php/text editor. E.g: index-3.html;

2. Scroll down to the ‘Sound Tracks’ area. Use the search tool (Ctrl + F) to locate the needed area;

3. Look for the ‘data-src=’ attribute. It retrieves the source of the .mp3 track;

4. Change path to existing .mp3 track. You should define the path to your own audio track instead of existing path. Eg:

   data-src="audio/sample_audio.mp3"

5. Change the name of the .mp3 track inside of the

tags. E.g:

Name of the audio file

To add new .mp3 tracks

1. Open .html page that contains .mp3 tracks with any php/text editor. E.g: index-3.html;

2. Scroll down to the ‘Sound Tracks’ area. Use the search tool (Ctrl + F) to locate the needed area:

3. Look for the music list block. Locate the line with path and name of the audio file. It should look like this:

   Thinking Out Loud

4. Duplicate the whole line:

   

5. Change path and audio file name of the duplicated line:

   

This is the end of the tutorial. We’ve successfully added a new audio file:

Feel free to check the detailed video tutorial below: