TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить аудиоплеер на сайт WordPress без плагина?

122

СМИ очень важны для привлечения пользователей и удержания их на вашем сайте. Вы можете легко встроить YouTube и другие видео в свой WordPress. Точно так же, если вы хотите встроить аудио на свой сайт, вот как вы можете это сделать. WordPress имеет встроенный аудиоплеер HTML5 для простой демонстрации ваших аудиофайлов. Вы можете создать проигрыватель с одним аудио или с несколькими аудиофайлами в виде списка воспроизведения. В этой статье мы объясним, как добавить аудиоплеер на сайт WordPress, используя шорткод аудио по умолчанию.



Добавить аудио в WordPress без плагина

WordPress имеет встроенный звуковой шорткод для вставки аудиоплеера HTML5 в ваши сообщения, страницы и виджеты. Он поддерживает все типы файлов, поддерживаемые HTML5, такие как .mp3, .egg и .wav.

Вставка одного аудиофайла

Как и любые другие изображения и видео, загрузите свой аудиофайл с помощью кнопки «Добавить мультимедиа» в редакторе сообщений WordPress. После загрузки файла введите сведения о дорожке на экране мультимедиа. WordPress позволяет добавлять сведения о дорожке, такие как название вашего аудио., имя исполнителя, название альбома, заголовок и описание вашего аудиофайла, как показано ниже.

Как добавить аудиоплеер на сайт WordPress без плагина?

Добавление сведений о дорожке аудиофайла в WordPress

Хотя однофайловый аудиоплеер не использует эти данные на экране, они отображаются в списке воспроизведения. Прокрутите вниз до конца панели и убедитесь, что вы выбрали опцию «Встроить медиаплеер». Его следует выбрать в раскрывающемся списке напротив «Встроить или связать» в разделе «Настройки отображения вложений».

Как добавить аудиоплеер на сайт WordPress без плагина?

Выберите вариант встроенного медиаплеера

Это важная настройка, позволяющая WordPress вставлять аудиоплеер вместо ссылки на медиафайл или на страницу вложения. Нажмите кнопку «Вставить в сообщение», чтобы добавить файл в сообщение WordPress. WordPress автоматически добавит аудиоплеер HTML5.

Ниже приведен пример аудиоплеера HTML5 по умолчанию, вставленного с использованием шорткода аудио.

Аудиоплеер имеет минимум элементов управления с кнопками воспроизведения / паузы, индикатором выполнения, показывающим продолжительность, регулятором громкости и индикатором громкости. Аудиоплеер по умолчанию является адаптивным и занимает доступную ширину в зависимости от ширины браузера. И опубликованная статья будет иметь тот же аудиоплеер, что и в редакторе сообщений.

Настройка аудио шорткода

Теперь щелкните вкладку «Текст» в редакторе, чтобы увидеть, что аудиофайл в основном использует шорткод для отображения в качестве проигрывателя.

[if lt IE 9]><script>document.createElement('audio');</script><![endif]

Хотя шорткод имеет как открытые, так и закрывающие теги, закрывающий звуковой тег не является обязательным. Вы также можете добавить резервные аудиофайлы, используя приведенный ниже шорткод. В этом случае, если есть проблема с воспроизведением файла .mp3, WordPress выберет запасной вариант .ogg, а затем .wav.

Audio Player

Можно добавить параметры зацикливания и автовоспроизведения, как показано ниже:

Audio Player

Убедитесь, что опция автовоспроизведения включена, только если это необходимо для обеспечения удобного взаимодействия с пользователем.

Вставка списка воспроизведения

Нажмите кнопку «Добавить медиа» в редакторе сообщений, а затем нажмите «Создать список воспроизведения аудио». Загрузите или выберите необходимые аудиофайлы, которые будут отображаться в списке воспроизведения, и нажмите кнопку «Создать новый список воспроизведения».

Как добавить аудиоплеер на сайт WordPress без плагина?

Создание списка воспроизведения аудио в WordPress

Вы попадете на экран редактирования списка воспроизведения, как показано ниже. Перетащите файлы, чтобы изменить порядок воспроизведения и при необходимости изменить заголовки.

Как добавить аудиоплеер на сайт WordPress без плагина?

Редактирование аудио-плейлиста в WordPress

На панели «Настройки списка воспроизведения» с правой стороны включите или отключите отображение списка дорожек, имени исполнителя и избранных изображений в аудиоплеере.

Наконец, нажмите «Вставить список воспроизведения аудио», и вы увидите аудиоплеер со списком воспроизведения, как показано ниже:

Как добавить аудиоплеер на сайт WordPress без плагина?

Аудиоплеер со списком воспроизведения в WordPress

Примечание. Чтобы добавить изображение для аудиофайлов, перейдите в меню «Медиа> Библиотека». Отредактируйте загруженные вами аудиофайлы и добавьте изображение в каждый аудиофайл.


Статьи по Теме:


Настройка шорткода плейлиста

Когда вы переключитесь на вкладку «Текст», вы снова обнаружите, что WordPress использует шорткод для вставки списка воспроизведения, как показано ниже:

[playlist ids="xxx,xxx,xxx"]

Вы можете добавить следующие параметры для настройки плейлиста:

Параметр Значение по умолчанию Другие возможные значения Описание
тип аудио video Измените аудиоплеер на видеоплеер (вам необходимо загрузить необходимые видео).
порядок ASC DESC По возрастанию или убыванию
идентификаторы Идентификаторы вложений Через запятую
исключать пустой Введите идентификаторы вложений Введенные идентификаторы будут исключены из плейлиста.
треклист правда ложный Показать или скрыть плейлист
трек-номера правда ложный Показать или скрыть номера треков в плейлисте
изображений правда ложный Показать или скрыть избранное изображение в плеере
художники правда ложный Показать или скрыть имя исполнителя в плейлисте
стиль свет темный Применяйте светлую или темную кожу

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

[playlist ids="xxx,xxx,xxx" style="dark" tracknumbers="false"]

Вставить аудиоплеер в боковую панель и нижний колонтитул

Цель использования шорткода очень проста – его можно вставить в любую область вашего сайта, например, в боковую панель и нижний колонтитул. В разделе «Внешний вид> Виджеты» перетащите виджет «Текст» на боковую панель или область нижнего колонтитула, куда вы хотите добавить игрока.

Как добавить аудиоплеер на сайт WordPress без плагина?

Добавить аудиоплеер в область виджетов

Вставьте шорткоды аудио или плейлиста с вашими настройками, как описано выше. Сохраните свой виджет, и проигрыватель отобразится в выбранной области виджетов.

Заключительные слова

Хотя встроенное встраивание звука – хороший вариант, он прост и может не сработать, когда вам потребуется полная настройка аудиоплеера. Альтернативные варианты – использовать плагин аудиоплеера или встроить аудиоплеер со сторонних веб-сайтов, таких как SoundCloud.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее