WordPress: Vendosni një MP3 Player në Blog Post

Blog Post MP3 Player me WordPress

Me podcasting dhe ndarjen e muzikës kaq të përhapur në internet, ekziston një mundësi e shkëlqyer për të rritur përvojën e vizitorëve tuaj në faqen tuaj duke vendosur audio brenda postimeve tuaja në blog. Fatmirësisht, WordPress vazhdon të zhvillojë mbështetjen e saj për ngulitjen e llojeve të tjerë të mediave - dhe mp3 skedarët janë një nga ata që janë të lehtë për tu bërë!

Ndërsa shfaqja e një lojtari për një intervistë të fundit është e shkëlqyeshme, mbajtja e skedarit aktual audio mund të mos jetë e këshillueshme. Shumica e hostëve të faqeve në internet për faqet WordPress nuk janë të optimizuara për transmetimin e mediave - prandaj mos u habisni nëse filloni të hasni në disa çështje ku ju godisni kufijtë e përdorimit të gjerësisë së bandës ose stendat tuaja audio krejtësisht. Unë do të rekomandoja mbajtjen e skedarit aktual audio në një shërbim transmetimi audio ose motor pritës podcast. Dhe… sigurohuni që hosti juaj mbështet SSL (një shteg https: //)… një blog që pritet në mënyrë të sigurt nuk do të luajë një skedar audio që nuk është i vendosur mirë në ndonjë vend tjetër.

Kjo tha, ju e dini vendndodhjen e skedarit tuaj, ngulitja e saj në një postim në blog është shumë e thjeshtë. WordPress ka lojtarin e vet audio HTML5 të integruar direkt në të, kështu që ju mund të përdorni një kod të shkurtër për të shfaqur luajtësin.

Ja një shembull nga një episod i fundit i podcastit që bëra:

Me përsëritjen më të fundit të redaktorit Gutenberg në WordPress, unë sapo ngjiti rrugën e skedarit audio dhe redaktori në të vërtetë krijoi kodin e shkurtër. Vijon kodi aktual i shkurtër, ku mund të zëvendësosh src me URL-në e plotë të skedarit që dëshiron të luhet.

[audio src="audio-source.mp3"]

WordPress mbështet llojet e skedarëve mp3, m4a, ogg, wav dhe wma. Mund të keni edhe një kod të shkurtër që siguron një rikthim në rast se keni vizitorë duke përdorur shfletues që nuk mbështesin njërën ose tjetrën:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

Mund ta përmirësoni kodin e shkurtër si dhe me opsione të tjera:

  • loop - një mundësi për shikimin e audios.
  • luajtja automatike - një mundësi për të luajtur automatikisht skedarin sapo të ngarkohet.
  • preload - një mundësi për të ngarkuar paraprakisht skedarin audio me faqen.

Bashkojini të gjitha dhe ja çfarë merrni:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

Listat e dëgjimit audio në WordPress

Nëse dëshironi të keni një listë dëgjimi, WordPress aktualisht nuk mbështet mbajtjen e jashtme të secilit prej skedarëve tuaj për t'u luajtur, por ata e ofrojnë atë nëse jeni duke pritur skedarët tuaj audio brenda vendit:

[playlist ids="123,456,789"]

Atje jane disa zgjidhje atje që mund t'i shtoni në temën tuaj të fëmijës që do të mundësojë ngarkimin e skedarit të jashtëm audio.

Shtoni RSS-në tuaj Podcast në shiritin tuaj anësor

Duke përdorur lojtarin WordPress, unë shkrova një shtesë për të shfaqur podcast tuaj automatikisht në një miniaplikacion të shiritit anësor. Ti mundesh lexoni këtu këtu shkarkoni shtojcën nga depoja WordPress.

Përshtatja e WordPress Audio Player

Siç mund ta shihni nga faqja ime, MP3 player është mjaft themelore në WordPress. Megjithatë, për shkak se është HTML5, ju mund ta vishni atë mjaft duke përdorur CSS. CSSIgniter ka shkruar një tutorial të shkëlqyeshëm në personalizimi i riprodhuesit audio kështu që unë nuk do t'i përsëris të gjitha këtu… por këtu janë opsionet që mund të personalizoni:

/* 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;
}

Përmirësoni WordPress tuaj MP3 Player

Ekzistojnë gjithashtu disa shtojca të paguara për shfaqjen e audios tuaj MP3 në disa lojtarë absolutisht mahnitës të audios:

Zbulimi: Unë jam duke përdorur lidhjet e mia të anëtarësimit për shtojcat e mësipërme përmes Codecanyon, një faqe fantastike shtojcash që ka shtojca të mbështetura mirë dhe shërbim dhe mbështetje të jashtëzakonshme.

Çfarë mendoni ju?

Kjo faqe përdor Akismet për të reduktuar spamin. Mësoni se si përpunohet komenti juaj.