WordPress: Вбудуйте MP3-плеєр у свій блог
Завдяки підкастингу та обміну музикою, які настільки поширені в Інтернеті, є чудова можливість покращити досвід відвідувачів на вашому сайті, вбудувавши аудіо у ваші дописи у блозі. На щастя, WordPress продовжує розвивати свою підтримку для вбудовування інших типів медіа - і mp3 файли - одні з тих, які легко зробити!
Хоча демонструвати програвач для недавнього інтерв’ю чудово, розміщення власного аудіофайлу може бути недоцільним. Більшість веб-хостів для сайтів WordPress не оптимізовані для потокового мультимедіа, тому не дивуйтеся, якщо у вас виникнуть проблеми, коли ви досягнете обмежень щодо пропускної здатності або ваших аудіозабот. Я рекомендую розміщувати фактичний аудіофайл на службі потокового передавання звуку або на механізмі хостингу подкастів. І ... переконайтеся, що ваш хост підтримує SSL (https: // шлях) ... щоденник, який надійно розміщений, не відтворюватиме аудіофайл, який не розміщений надійно в іншому місці.
Тим не менш, якщо ви знаєте розташування свого файлу, вставити його в допис блогу досить просто. WordPress має власний аудіопрогравач HTML5, вбудований безпосередньо в нього, тому ви можете використовувати короткий код для відображення програвача.
Ось приклад з недавнього епізоду подкастів, який я робив:
З останньою ітерацією редактора Gutenberg у WordPress я просто вставив шлях до аудіофайлу, і редактор фактично створив короткий код. Нижче наведено фактичний шорткод, де ви заміните src на повну URL-адресу файлу, який ви хочете відтворити.
[audio src="audio-source.mp3"]
WordPress підтримує типи файлів mp3, m4a, ogg, wav та wma. Ви навіть можете мати шорт-код, який забезпечує резервний варіант, якщо відвідувачі використовують браузери, які не підтримують той чи інший:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]
Ви також можете покращити шорт-код за допомогою інших опцій:
- цикл - опція для циклу аудіо.
- автовідтворення - опція автоматичного відтворення файлу відразу після завантаження.
- попереднє завантаження - опція попереднього завантаження аудіофайлу на сторінку.
Складіть все це разом, і ось що ви отримаєте:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]
Аудіоплейлисти в WordPress
Якщо ви хочете мати список відтворення, WordPress наразі не підтримує зовнішній хостинг кожного з ваших файлів для відтворення, але вони пропонують його, якщо ви розміщуєте свої аудіофайли внутрішньо:
[playlist ids="123,456,789"]
Існує деякі рішення там ви можете додати до своєї дочірньої теми, що дозволить завантажувати зовнішні аудіофайли.
Додайте свій канал RSS-подкасту на бічну панель
Використовуючи програвач WordPress, я написав плагін для автоматичного відображення вашого подкасту у віджеті бічної панелі. Ти можеш про це читайте тут та завантажити плагін зі сховища WordPress.
Налаштування аудіопрогравача WordPress
Як ви можете побачити на моєму власному сайті, MP3-плеєр досить простий у WordPress. Однак, оскільки це HTML5, ви можете трохи змінити його, використовуючи CSS. CSSIgniter написав чудовий підручник про налаштування аудіоплеєра тому я не буду повторювати все це тут ... але ось параметри, які ви можете налаштувати:
/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
background-color: #efefef;
}
/* Player controls */
.mytheme-mejs-container .mejs-button > button {
background-image: url("images/mejs-controls-dark.svg");
}
.mytheme-mejs-container .mejs-time {
color: #888888;
}
/* Progress and audio bars */
/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
background-color: #fff;
}
/* Track progress bar background (amount of track fully loaded)
We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
background-color: rgba(219, 78, 136, 0.075);
}
/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
background: #db4e88;
}
/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
height: 3px;
}
.mytheme-mejs-container .mejs-time-handle-content {
top: -6px;
}
.mytheme-mejs-container .mejs-time-total {
margin-top: 8px;
}
.mytheme-mejs-container .mejs-horizontal-volume-total {
top: 19px;
}
Покращте свій MP3-програвач WordPress
Є також деякі платні плагіни для відображення вашого MP3-аудіо в деяких абсолютно приголомшливих аудіоплеєрах:
- MP3 Sticky Player WordPress плагін
- Королівський аудіоплеєр WordPress плагін
- Набір плагінів WordPress для аудіоплеєрів HTML5
- Легкий аудіоплеєр WordPress плагін
- Програвач подкастів Sonaar для WordPress
Розкриття інформації: Martech Zone використовує партнерські посилання для зазначених вище плагінів, зокрема Codecanyon, фантастичний сайт плагінів, який має добре підтримувані плагіни та видатний сервіс та підтримку.