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.