Как вставить аудио в html редакторе WordPress: делаем в два шага

как вставить аудио в html

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

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

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

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

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

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

sozdanie-kataloga

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

Papka-muzyka

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

tri-fayla

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

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

Вставка кода

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

dobavit-zapis

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

rezim-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, поэтому подписывайтесь и смотрите наши видео там.

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

Онлайн-эксперимент в блоггинге!

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

Подписаться

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

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

Поделись с друзьями:

Комментариев: 4

  1. Наталья Краснова

    Только вчера я задумалась над тем, что пора мне научиться вставлять аудиофайлы на страницы своего блога. В последней статье, где я даю отчет итога конкурса вместо аудиофайла установила видео. Заношу страницу в закладки, чтобы изучить позднее. Спасибо.

    Ответить
    1. Екатерина Калмыкова

      Наталья, скоро в эту статью мы выложим подробное видео, как это сделать!

      Ответить
  2. Саша Богданова

    Недавно спрашивала у одного человека, у которого были в статьях аудио, как их добавить и он рассказал................................ долго рассказывал и я ничего не поняла)) Может он мне про какие-то новые способы пытался рассказать(?) не знаю... А тут всё просто и понятно! Молодцы ребята!! Спасибо!

    Пойду попробую...

    Ответить
    1. Екатерина Калмыкова

      Привет, Саш. Напиши потом, все ли у тебя получилось?

      Ответить

Оставить комментарий

=) 8) :( ;( ;) :P :-D =-O :-! *IN LOVE* %) *CRAZY* *LOL* ]:-> *MACHO* *EEK*