If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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.

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"

    JS_Animated_How_to_change_existing_and_add_new_mp3 _tracks_1

  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:

    JS_Animated_How_to_change_existing_and_add_new_mp3 _tracks_1

  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)