Добрый день, читатели блога Blog-Bridge.ru. Сегодня прекрасный воскресный день, и я решил дать Кате еще один выходной, написав краткое руководство про то, как вставить аудио в html редакторе WordPress.

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

Подготовка перед вставкой кода

Для начала давайте создадим у себя на сервере папку, где мы будем хранить аудио файлы.

Я это делаю при помощи FTP-клиента Filezilla. Если у вас она не установлена или вы не знаете, как ею пользоваться, то прочитайте вот эту статью. Но на всякий случай сделаю краткий экскурс.

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

В открывшемся окне вводим название папки. Я чтобы не путаться назвал «muzyka».

Далее переносим в нее тот аудио файл, который бы вы хотели выложить на своем ресурсе.

Надеюсь, вы обратили внимание, что я перенес три файла. На самом деле, это одна и та же запись, только в трех форматах (mp3, wav и ogg). Связано это с тем, что разные браузеры поддерживают разные форматы.

Например, Google Chrome воспроизводит четыре расширения (mp3, wav, ogg и acc ), а вот Opera не дружит с аудио, которые созданы в формате mp3 и acc, но прекрасно воспроизводит при этом расширения wav и ogg. Поэтому, чтобы у посетителей вашего сайта не возникло никаких проблем с проигрыванием аудио, я рекомендую создать файл в трех форматах и положить себе на сервер.

Вставка кода

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

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

Далее в том месте, где мы хотим, чтобы была запись, прописываем вот такой код:

1
2
3
4
5

<audio controls>
 <source src="/muzyka/1.mp3">
 <source src="/muzyka/1.ogg">
 <source src="/muzyka/1.wav">
</audio>

В нем тег audio отвечает за воспроизведение нашего файла, а source src за адрес расположения данного файла.

Если вы хотите, чтобы файл загружался автоматически при загрузки страницы, то вставьте атрибут autoplay. Тогда ваш код будет начинаться так:

1

<audio autoplay controls>

Ну, а если вы хотите, чтобы он еще и играл по кругу неограниченное количество раз, то добавьте атрибут loop:

1

<audio controls autoplay loop>

Если вы все сделали правильно, то у вас появиться вот такой вот проигрыватель:

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

Слушайте и вдохновляйтесь на новые подвиги.

Видео «Как вставить аудио файл в статью»

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

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

Если вдруг после просмотра видео у вас остались какие-то вопросы, то задавайте их в комментариях.

А я с вами буду прощаться, до новых встреч на блоге!

С вами был Антон Калмыков