Сегодня вы узнаете как создать на своём сайте стильный и современный 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.
Просто добавьте шорткод на страницу и обновите её или опубликуйте. На сайте вместо шорткода будет отображаться готовый аудиоплеер.
Хочу установить такой плеер на страницу WP. После заполнения полей формы появляется красным цветом запись “Please fill all fields marked ‘required’ (Пож. заполните обязательные поля) и трек не вставляется. Возможно из-за пустого и не заполненного поля Ogg Link ? Помогите, буду признателен!
Все обязательные поля необходимо заполнить.
У меня на вкладке “Manage Songs” отображается пустая страница. Совсем ничего нет кроме названия Manage Songs. ни upload, ни mp3. Может подскажите с чем это связано?