WordPress: Убудуйце MP3-плэер у свой блог

MP3-прайгравальнік у блогу з WordPress

З такім распаўсюджаным у Інтэрнэце падкастынгам і сумесным выкарыстаннем музыкі ёсць выдатная магчымасць палепшыць досвед наведвальнікаў на вашым сайце, убудаваўшы аўдыя ў паведамленні вашага блога. На шчасце, WordPress працягвае развіваць сваю падтрымку для ўбудавання іншых тыпаў носьбітаў - і mp3 файлы адно з тых, якія лёгка зрабіць!

Адлюстроўваць прайгравальнік для нядаўняга інтэрв'ю выдатна, размяшчэнне ўласнага аўдыяфайла можа быць непажаданым. Большасць вэб-хастоў для сайтаў WordPress не аптымізаваны для струменевага мультымедыя, таму не здзіўляйцеся, калі вы пачнеце сутыкацца з некаторымі праблемамі, калі вы дасягнеце абмежаванняў у выкарыстанні прапускной здольнасці альбо ўвогуле на вашых аўдыё. Я б рэкамендаваў размясціць фактычны аўдыяфайл на сэрвісе перадачы аўдыя альбо на хостынгу падкастаў. І ... пераканайцеся, што ваш хост падтрымлівае SSL (шлях https: //) ... блог, які бяспечна размешчаны, не будзе прайграваць аўдыяфайл, які не знаходзіцца ў іншым месцы.

Тым не менш, калі вы ведаеце, дзе знаходзіцца ваш файл, убудаваць яго ў паведамленне ў блогу даволі проста. WordPress мае ўласны аўдыяпрайгравальнік HTML5, убудаваны непасрэдна ў яго, так што вы можаце выкарыстоўваць шорт-код для адлюстравання прайгравальніка.

Вось прыклад з нядаўняй серыі падкастаў, якую я зрабіў:

З апошняй ітэрацыяй рэдактара Гутэнберга ў 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-аўдыя ў нейкіх абсалютна цудоўных аўдыяпрайгравальніках:

Раскрыццё інфармацыі: Я выкарыстоўваю свае партнёрскія спасылкі для вышэйзгаданых убудоў праз Codecanyon, фантастычны сайт убудоў, які мае добра падтрымоўваныя ўбудовы і выдатнае абслугоўванне і падтрымку.

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.