JS Animated. Как работать с плагином «RD Audio Player»

Наша команда техподдержки рада представить Вам новый туториал, который покажет, как работать с RD audio player в Веб-шаблонах.

Этот плеер прост в использовании, так как Вам не нужно редактировать файлы javascript. Для того чтобы работать с плагином, следуйте инструкциям, предложенным ниже:

1. Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом, для того чтобы получить доступ к файлам вашего сайта.

2. Откройте файл .html страницы и найдите раздел RD Audio.

3. Теперь Вы можете начать редактирование списка воспроизведения. Ниже Вы найдёте разделы треков и элементов управления плеером:

   			<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>

   Как Вы можете видеть, ко всем кнопкам и элементам плеера есть комментарии, для того чтобы показать, для чего они используются. Даже если комментарий отсутствует, кнопка будет иметь специальный класс, например, rd-audio-prev, rd-audio-next.

4. Вы можете добавить или удалить полосу прогресса или изменить продолжительность трека. Ниже Вы найдёте полный список классов, доступных для редактирования отдельных элементов:

   • rd-audio-prev — кнопка ‘Предыдущий’
   • rd-audio-next — кнопка ‘Следующий’
   • rd-audio-play-pause — кнопка ‘Воспроизведение’
   • rd-audio-stop — кнопка ‘Стоп’
   • rd-audio-progress-bar — полоса прогресса
   • rd-audio-progress-bar-slider — ползунок на полосе прогресса
   • rd-audio-duration — продолжительность трека
   • rd-audio-current-time — текущее время воспроизведения трека
   • rd-audio-title — название трека
   • rd-audio-author — автор трека
   • rd-audio-volume — кнопка «Без звука»
   • rd-audio-volume-bar — полоса громкости
   • rd-audio-volume-bar-slider — ползунок на полосе громкости
   • rd-audio-playlist — список воспроизведения

   Вы можете указать пользовательское название списка воспроизведения. Оно будет отображаться на вашем сайте. Вы можете также указать информацию о треке: заголовок, автора и т.д.

5. Путь к аудиофайлу нужно указать в атрибуте ‘data-rd-audio-src’. Во первых, загрузите аудиофайл в папку ‘audio’ на сервере и, затем, вставьте путь к файлу в список воспроизведения. Лучше не использовать пробелы в названиях файлов.

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

6. Новый трек легко добавить, дублировав код одного из существующих элементов. Закончив редактирование, сохраните изменения и проверьте ваш сайт:

   

Теперь Вы знаете, как работать со списками воспроизведения, созданными, используя плагин RD Audio Player. Вы можете также ознакомиться с детальным видео-туториалом ниже: