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

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

1. Добавьте аудио в классический редактор WordPress

WordPress имеет встроенный аудиошорткод для вставки аудиоплеера HTML5 в ваши сообщения, страницы и виджеты. Он поддерживает все типы файлов, поддерживаемые HTML5, такие как .mp3, .egg и .wav. Этот процесс очень прост с помощью Classic Editor с помощью кнопки «Добавить медиа».

Добавить медиа в классическом редакторе

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

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

Добавление информации о треке аудиофайла в WordPress

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

Выберите опцию «Встроить медиаплеер».

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

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

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

1.2. Настройка короткого кода аудио

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

(аудио mp3=”https://img.webnots.com/2017/02/Sample1.mp3″)(/audio)

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

(аудио 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)

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

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

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

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

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

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

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

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

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

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

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

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

(идентификаторы плейлистов = “xxx,xxx,xxx”)

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

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

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

(список воспроизведения ids=”xxx,xxx,xxx” style=”dark” tracknumbers=”false”)

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

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

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

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

2. Вставьте аудиоплеер в редактор Гутенберга.

Поскольку редактор Gutenberg предлагает блоки, вы не найдете кнопку «Добавить медиа». Однако вам доступно множество других вариантов.

2.1. Использование классического блока

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

Добавить медиа в классический блок Gutenberg

2.2. Использование блока шорткода

Используйте блок Shortcode, чтобы вставить любой короткий код аудио или списка воспроизведения, как описано выше.

2.3. Аудио Блок

Гутенберг предлагает специальный аудиоблок, который вы можете использовать для вставки URL-адреса собственного или стороннего аудиофайла.

• Найдите и вставьте аудиоблок.
• Нажмите «Медиатека», чтобы выбрать или загрузить поддерживаемый аудиофайл. Эта медиатека будет отображать только аудиофайлы, а не изображения, и вы можете выбрать только один файл для вставки в качестве проигрывателя. Вы также можете просмотреть аудиофайл перед вставкой.

Выберите аудиофайл

• Блок мгновенно преобразует выбранный файл в аудиоплеер. Вы можете включить автовоспроизведение, цикл и установить условие предварительной загрузки в настройках блока на боковой панели. Выберите условие предварительной загрузки «Авто» для автоматического воспроизведения звука при загрузке страницы.

Аудиоблок Гутенберга

2.4. Использовать блок для внедрения

Используйте этот блок для вставки URL-адреса собственного и стороннего аудиофайла. Также можно вставить URL-адрес плейлиста из сторонних сервисов, таких как Spotify. Вы можете вставить только один URL-адрес, и Гутенберг изменит встроенный URL-адрес на короткий код, который вы увидите в редакторе.

Встраивание аудио, преобразованное в шорткод

2.5. Другие встраиваемые блоки

Gutenberg также предлагает дополнительные блоки для встраивания для Spotify, SoundCloud, Mixcloud и Pocket Casts. Эти блоки работают аналогично блоку Embed.

Блоки вставки аудио Gutenberg

2.6. Пользовательский HTML

Если ваш любимый аудиосервис предлагает собственный код для встраивания (вместо URL), то вам следует использовать вариант «Пользовательский блок HTML». Просто вставьте пользовательский блок HTML и вставьте код в параметр «HTML». Предварительный просмотр может не работать в редакторе. Итак, вам нужно опубликовать контент и проверить результат на живой странице.

Пользовательский HTML-блок

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

Независимо от того, используете ли вы классический редактор или редактор Gutenberg, WordPress имеет множество возможностей для вставки аудиофайлов и плейлистов без плагина. Вы можете использовать свои файлы или вставить URL со сторонних сервисов. Хотя встроенное встраивание звука является хорошим вариантом, оно простое и может не подойти, если вам нужна настройка с полным контролем. Альтернативные варианты — встроить URL-адрес аудиоплеера или код со сторонних веб-сайтов, таких как SoundCloud.