Сегодня вы узнаете как создать на своём сайте стильный и современный HTML5 аудиоплеер. Преимущества такого плеера в том, что он будет отображаться на всех основных и популярных браузерах IE9+, Safari, Opera, Firefox, Chrome. Аудиоплеер отображается на всех популярных устройствах PC, Mac, iPhone, iPad и т.д. Вы сможете добавлять на сайт как одну дорожку, так и целый плейлист с помощью простого шорткода. Можно настроить цвет плеера, отображать рейтинги, обложки альбома. Можно предоставлять треки для скачивания или для покупки.
Создать современный и стильный HTML5 аудиоплеер вы сможете с помощью плагина – HTML5 jQuery Audio Player. Установить данный плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: HTML5 Player – Display Settings. Здесь вы сможете настроить параметры отображения аудиоплеера.
– Show Buy Text, выберите будет ли показываться кнопка Купить трек.
– Buy Text, если вы выбрали Yes, то укажите текст кнопки Купить.
– Show Track List, выберите показывать плейлист или нет.
– Auto Play, если вы выберите здесь Yes, то треки будут автоматически воспроизводиться при открытии страницы.
– Number Of Tracks, укажите здесь количество треков, если вы включили показ плейлиста.
– Currency Symbol, здесь можно указать символ валюты, в которой вы будете продавать треки.
– Background Colour, укажите здесь цвет фона аудиоплеера.
– Text Colour, укажите цвет текста в аудиоплеере.
– Нажмите на кнопку – Save Changes, чтобы сохранить сделанные изменения.
Далее, перейдите на страницу – Manage Songs. Здесь вы сможете загружать треки и создавать плейлисты.
– MP3 Link, нажмите на кнопку – Upload, чтобы загрузить аудиозапись в формате MP3.
– Ogg Link, нажмите на кнопку – Upload, чтобы загрузить аудиозапись в формате Ogg.
– Rating, поставьте здесь цифру от 1 до 5, для указания рейтинга трека.
– Song Title, укажите здесь название трека.
– Link Buy Text, укажите здесь текст для кнопки Купить.
– Song Price, укажите здесь цену трека.
– Cover Image, нажмите на кнопку – Upload, чтобы загрузить изображение обложки. Размер обложки 125 х 125 пикселей.
– Duration, здесь можно указать продолжительность трека.
– Artist, укажите здесь имя исполнителя песни.
– Нажмите на кнопку – Add Song, чтобы создать трек.
После добавления трека у вас внизу страницы появится первый трек. Чтобы добавить ещё несколько треков повторите операцию заново. Чтобы добавить аудиоплеер на сайт, перейдите на страницу установленных плагинов. В описании плагина будет отображаться шорткод, который вам нужно скопировать и добавить на страницу или в запись, где и будет отображаться аудиоплеер HTML5.
Просто добавьте шорткод на страницу и обновите её или опубликуйте. На сайте вместо шорткода будет отображаться готовый аудиоплеер.
