Вміст Маркетингмаркетингові інструменти

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-аудіо в деяких абсолютно приголомшливих аудіоплеєрах:

Розкриття інформації: Martech Zone використовує партнерські посилання для зазначених вище плагінів, зокрема Codecanyon, фантастичний сайт плагінів, який має добре підтримувані плагіни та видатний сервіс та підтримку.

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.