Статьи

4 простых способа добавить аудио на ваш сайт WordPress

Ноябрь 26, 2018

Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

У вас есть аудиофайлы, которыми вы хотите поделиться со своей аудиторией? Facebook не позволит вам … если вы не прибегаете к разочаровывающим обманам, таким как обмен аудиофайлами в Dropbox или преобразование его в видео. Но если вы размещаете свой собственный веб-сайт WordPress, ничто не может быть проще.

Если упоминание о добавлении аудио на веб-сайты дает вам паузу, позвольте мне объяснить. Я не говорю о добавлении сырной фоновой музыки на сайт GeoCities с анимацией в формате GIF.

Хотя не стоит добавлять музыку на свой сайт просто ради этого, есть несколько веских и веских причин для включения аудио на ваш сайт. Вот некоторые из них:

  • Музыкант делится образцами своей музыки.
  • Подкастер делает его шоу доступным.
  • Школы, церкви и веб-сайты мероприятий, позволяющие посетителям слушать семинары, проповеди или лейтмотивы.
  • Учителя, тренеры и преподаватели, включая аудио примеры в своих онлайн-уроках.
  • Блоггеры, добавляющие бонусный контент на свой сайт, например, интервью.

Вы можете не осознавать этого, но WordPress по умолчанию способен обрабатывать аудиофайлы. Это не сложно — если вы знаете, как вставить изображение в пост, у вас не возникнет проблем при вставке аудио.

До HTML5 не было стандартного способа воспроизведения аудио на веб-странице. Флэш широко использовался. Это было не красиво. WordPress использует HTML5 для встраивания звука, поэтому он совместим с большинством браузеров и устройств, включая мобильные устройства.

Есть и другие способы включить аудио на ваш сайт. К ним относятся встраиваемые проигрыватели сторонних производителей (включая сайты аудиобиблиотек) и плагины WordPress. Они дают преимущество дополнительных функций и возможность использовать аудио с библиотечных сайтов.

Конечно, используйте только те аудио файлы, которые вы можете использовать на законных основаниях. Это будет включать аудио, которое вы создали сами, аудио, которое вы лицензировали у других, и аудио без лицензионных платежей. Образец аудио, использованный в этой статье, взят из бесплатной музыкальной библиотеки YouTube.

1. Используйте аудиоплеер WordPress

Самый простой способ добавить аудио на ваш сайт — это встроенный аудиоплеер WordPress. Если у вас нет особых потребностей, есть мало причин искать в другом месте.

Вы можете добавить файлы .mp3, .m4a, .ogg или .wav в медиатеку WordPress. Оттуда вы можете вставить его в свой пост вместе с необязательной подписью.

Вот как:

  1. Нажмите кнопку Add Media
  2. Перетащите свой аудиофайл в библиотеку или нажмите « Upload FilesSelect Files
  3. Справа на экране заполните соответствующие метаданные для аудиофайла, включая название, исполнителя, альбом, подпись и описание.
  4. Убедитесь, что выбран параметр « Embed Media Player
  5. Нажмите Insert into Post

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

А теперь текстовое представление поста после добавления изображения (см. Второй абзац). На снимке экрана также показано несколько других способов добавления кода для аудиоплеера вручную.

И это то, на что похож пост при предварительном просмотре или после публикации. Для аудиофайла отображается мини-плеер. Обратите внимание, что игрок выглядит одинаково для всех трех методов.

Живой пример

Попробуйте нажать на аудиофайл ниже, чтобы услышать его воспроизведение.

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

Аудиофайл можно зациклить или автоматически воспроизвести, добавив в код некоторые параметры (см. Страницу «Аудио шорткод» на WordPress.org). Чтобы изменить цвет медиаплеера, вам нужно использовать пользовательский CSS, например: 

 .music-player .wp-playlist-light,
.music-player .wp-playlist-light .wp-playlist-playing {
    background: #999;
    border-color: #999;

В качестве альтернативы, если вам важны дополнительные функции или настройка внешнего вида медиаплеера, ознакомьтесь с плагинами ниже.

2. Создайте аудио-плейлист WordPress

У вас есть более одного аудиофайла? Поддержка плейлистов также встроена прямо в WordPress. Вот как начать:

  1. В медиатеке нажмите « Create Audio Playlist
  2. Выберите аудиофайлы, которые вы хотите включить в список воспроизведения.
  3. Добавьте любые соответствующие метаданные для списка воспроизведения, затем нажмите « Create a new playlist
  4. Выберите необходимые параметры (для отображения списка дорожек, имени исполнителя и обложки), затем нажмите « Insert audio playlist

Вот экран, который вы видите после нажатия Create Audio Playlist Эта опция доступна, только если в библиотеке есть аудиофайлы.

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

Вот текстовое представление поста с добавленным ярлыком плейлиста.

И вот как это выглядит после публикации.

Живой пример

Вот встроенный плейлист, с которым вы можете играть.

109
Share: