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

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

  • Использование аудиоплеера HTML5 по умолчанию
  • Настройка аудиоплеера
  • Вставка аудиоплеера со списком воспроизведения
  • Настройка шорткода плейлиста
  • Вставка аудиоплеера в область виджетов

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

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

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

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

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

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

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

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

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


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

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

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

[ audio mp3=”https://img.webnots.com/2017/02/Sample1.mp3″ ][ /audio ]

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

Закрывающий тег аудио не является обязательным.

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

[ audio mp3=”Sample1.mp3″ ogg=”Sample1.ogg” wav=”Sample1.wav” ][ /audio ]

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

[ audio mp3=”Sample1.mp3″ ogg=”Sample1.ogg” wav=”Sample1.wav” loop=”on” autoplay=1][ /audio ]

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

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

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

Создание аудио плейлиста в WordPress

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

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

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

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

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

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

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

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

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

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

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

[ playlist ids=”xxx,xxx,xxx” ]

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

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

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

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

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

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

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

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

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

В следующих статьях мы обсудим следующие темы, связанные со звуком WordPress:

  • Добавить собственный аудиоплеер с плагином
  • Встраивание аудиоплеера сторонних производителей, например SoundCloud
  • Добавить фоновую музыку на сайт WordPress

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *