TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

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

9

ЗМІ дуже важливі для залучення користувачів та утримання їх на вашому веб -сайті. Ви можете легко вставляти YouTube та інші відео у свій WordPress. Аналогічно, якщо ви хочете вставити аудіо на свій сайт, ось як це можна зробити. WordPress має вбудований аудіоплеєр HTML5 для простого демонстрації ваших аудіофайлів. Ви можете створити плеєр з одним аудіо або декількома аудіофайлами як список відтворення. У цій статті ми розповімо, як додати аудіопрогравач на сайт WordPress, використовуючи звуковий шорткод за замовчуванням.



Додайте аудіо в WordPress без плагіна

WordPress має вбудований короткий звуковий код для вставлення аудіопрогравача HTML5 у ваші дописи, сторінки та віджети. Він підтримує всі типи файлів, які підтримуються HTML5, такі як .mp3, .egg та .wav.

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

Як і будь -які інші зображення та відео, завантажте свій аудіофайл за допомогою кнопки «Додати медіа» у редакторі повідомлень WordPress. Після завантаження файлу введіть деталі доріжки на екрані медіа. WordPress дозволяє додати деталі доріжки, наприклад назву вашого аудіо, ім’я виконавця, назва альбому, підпис та опис вашого аудіофайлу, як показано нижче.

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

Додавання деталей доріжки аудіофайлу у WordPress

Хоча однофайловий аудіопрогравач не використовує ці дані на екрані, ці дані відображаються у списку відтворення. Прокрутіть униз до кінця панелі та перевірте, чи вибрано параметр «Вставити медіапрогравач». Його слід вибрати зі спадного меню на вкладці "Вставити або Посилання" в розділі "Налаштування відображення вкладеного файлу".

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

Виберіть параметр "Вставити медіапрогравач"

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

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

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

Налаштування шорткоду аудіо

Тепер натисніть на вкладку «Текст» у редакторі, щоб побачити, що аудіофайл в основному використовує короткий код для відображення як програвач.

[if lt IE 9]><script>document.createElement('audio');</script><![endif]

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

Audio Player

Параметри циклу та автоматичного відтворення можна додати, як показано нижче:

Audio Player

Обов’язково ввімкніть опцію автоматичного відтворення лише за потреби, щоб забезпечити хороший досвід користувача.

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

Натисніть кнопку «Додати медіа» у своєму редакторі публікацій, а потім натисніть кнопку «Створити аудіо -список відтворення». Завантажте або виберіть необхідні аудіофайли для відображення у списку відтворення та натисніть кнопку «Створити новий список відтворення».

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

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

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

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

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

На панелі «Налаштування списку відтворення» з правого боку увімкніть або вимкніть список треків, ім’я виконавця та зображення, які відображатимуться в аудіопрогравачі чи ні.

Нарешті, натисніть «Вставити аудіо -список відтворення», і ви побачите аудіопрогравач зі списком відтворення, як показано нижче:

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

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

Примітка: Щоб додати зображення до аудіофайлів, перейдіть до меню «Медіа> Бібліотека». Відредагуйте завантажені аудіофайли та додайте до кожного аудіофайлу зображення із зображенням.


Пов’язані статті:


Налаштування короткого коду списку відтворення

Коли ви перейдете на вкладку «Текст», ви знову побачите, що WordPress використовує шорткод для вставлення списку відтворення, як показано нижче:

[playlist ids="xxx,xxx,xxx"]

Ви можете додати такі параметри, щоб налаштувати список відтворення:

Параметр Значення за замовчуванням Інші можливі значення Опис
тип аудіо video Змініть аудіоплеєр на відеоплеєр (потрібно завантажити необхідні відео).
замовлення ASC DESC За зростанням або спаданням
ідентифікатори Ідентифікатори вкладених файлів Розділяється комою
виключити порожній Введіть ідентифікатори вкладень Введені ідентифікатори будуть виключені зі списку відтворення
список треків правда помилковий Показати або приховати список відтворення
трекові номери правда помилковий Показати або приховати номери треків у списку відтворення
зображення правда помилковий Показати або приховати зображення у програвачі
художники правда помилковий Показувати або приховувати ім’я виконавця у списку відтворення
стилю світло темний Нанесіть світлу або темну шкіру

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

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

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

Мета використання короткого коду дуже проста – його можна вставити в будь -яку область вашого сайту, наприклад бічну панель і нижній колонтитул. У розділі «Вигляд> Віджети» перетягніть віджет «Текст» на бічну панель або колонтитул, куди потрібно додати програвач.

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

Додайте аудіопрогравач у область віджетів

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

Заключні слова

Хоча вбудований аудіовбудовування є хорошим варіантом, він простий і може не працювати, коли вам потрібна повна настройка аудіопрогравача. Альтернативними варіантами є використання плагіна аудіопрогравача або вбудовування аудіоплеєра зі сторонніх веб -сайтів, таких як SoundCloud.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі