Categories

Featured templates

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

Daniel Morales December 2, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

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

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

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:

JS_Animated_How_to_change_existing_and_add_new_mp3 _tracks_6

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 <li> </li> tags. E.g:

    <li data-src="audio/sound_1.mp3">Name of the audio file</li>
    JS_Animated_How_to_change_existing_and_add_new_mp3 _tracks_3

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:

    <li data-src="audio/sound_1.mp3">Thinking Out Loud</li>
  4. Duplicate the whole line:

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

    JS_Animated_How_to_change_existing_and_add_new_mp3 _tracks_5

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

JS_Animated_How_to_change_existing_and_add_new_mp3 _tracks_6

Feel free to check the detailed video tutorial below:

JS Animated. How to change existing and add new mp3 tracks (based on template #58018)
This entry was posted in JS Animated tutorials and tagged add, HTML, mp3, track. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket