JS Animated. How to work with “RD Audio Player” plugin

Our Support team is ready to present you a new tutorial that shows how to work with RD audio player in Website templates.

This player is easy to use, and no javascript files editing is required. In order to work with it, please refer to steps below:

1. Connect to your FTP or open File manager tool of your Hosting cPanel to reach site files.

2. Open the page .html file to find an RD Audio section.

3. Now, you can start editing the playlist itself. There are sections for the audio and its controls below:

   			<div class="rd-audio-controls-left"> 
   				<!-- Play\Pause button--><a href="#" class="rd-audio-play-pause mdi mdi-play rd-audio-icon has-controls"></a> 
   				<!-- Prev Button--><a href="#" class="rd-audio-prev mdi mdi-fast-forward rd-audio-icon"></a> 
   				<!-- Next Button--><a href="#" class="rd-audio-next mdi mdi-fast-forward rd-audio-icon"></a>
   			</div>

   As you can see, all the buttons and items below have comments to show you the purpose of each one. Even if a comment is not there, the button ia marked with a specific class, like rd-audio-prev, rd-audio-next.

4. You can also add or remove the progress bar and edit track duration. Below you can see the full list of classes, available for adding to specific items:

   • rd-audio-prev – ‘previous’ button
   • rd-audio-next – ‘next’ button
   • rd-audio-play-pause – ‘play’ button
   • rd-audio-stop – ‘stop’ button
   • rd-audio-progress-bar – the progress bar
   • rd-audio-progress-bar-slider – the control on the progress bar
   • rd-audio-duration – the duration of the audio track
   • rd-audio-current-time – the current position on the audio track
   • rd-audio-title – audio track title
   • rd-audio-author – audio track author
   • rd-audio-volume – mute button
   • rd-audio-volume-bar – volume bar
   • rd-audio-volume-bar-slider – control on the volume bar
   • rd-audio-playlist – the playlist

   You can set your own title for the playlist. It will be displayed on your website. You can also specify your song’s data: the title, the author, etc.

5. The path to audio file should be specified in the ‘data-rd-audio-src’ attribute. So, first upload your audio file to the ‘audio’ folder on server and then paste the file path to the playlist. It’s better not to have spaces in file titles.

   			<li data-rd-audio-src="audio/my-track.mp3" data-rd-audio-title="Song #1" data-rd-audio-author="Test author"></li>		

6. The new song can be added easily by duplicating the code of the existing one. Save changes, when you’re done with editing, and feel free to check your website:

   

Now you know how to manage playlists, created, using RD Audio Player plugin. Feel free to check the detailed video tutorial below: