How to work with RD Audio Player plugin

This tutorial shows how to work with “RD Audio Player”.

“RD Audio Player” allows adding an audio player with audio tracks and playlists to your site.

Let’s check how this plugin works.

Open the .html file and locate RD audio section.

Audio controls are defined by the following code:

Each control is defined by the appropriate class. For example, class="rd-audio-progress-bar-wrap" is responsible for the progress bar. Please, check comments in the code. They provide detailed information regarding the particular code.

You can add/remove controls, as well as edit duration of the track. Please, check the list below. There you will find information regarding the classes we use in RD Audio Player:

• 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 of 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 specify the title for the playlist. This title will show up on your site. The plugin also allows specifying your song’s data: the author, the title, etc.

You should specify the path to the audio file using the attribute called data-rd-audio-src. First of all, upload the audio file to the audio folder of your website and specify the path to this file in the playlist. Please, do not use spaces in the titles. You may check this example of the code:

Feel free to add more songs by duplicating the code.

We have found out how to work with “RD Audio Player” plugin. In order to take full advantages of this plugin, please, use the classes we have specified in this tutorial. We recommend that you check the template documentation, which provides extensive information regarding RD Audio Player and its features.