WordPress: Afiche yon jwè MP3 nan pòs blog ou a

Blog Post MP3 Player ak WordPress

Avèk podcasting ak pataje mizik konsa répandus sou entènèt, gen nan yon gwo opòtinite amelyore eksperyans vizitè ou a sou sit ou pa entegre odyo nan posts blog ou a. Erezman, WordPress kontinye evolye sipò li pou entegre lòt kalite medya - ak mp3 dosye yo se youn nan moun ki fasil fè!

Pandan ke montre yon jwè pou yon entèvyou resan se gwo, hosting dosye aktyèl la odyo pa ka rekòmande. Pifò gen tout pouvwa a entènèt pou sit WordPress yo pa optimize pou difizyon medya - Se konsa, pa bezwen sezi si ou kòmanse kouri nan kèk pwoblèm kote ou frape limit sou itilizasyon Pleasant oswa depa odyo ou tout ansanm. Mwen ta rekòmande pou hosting dosye odyo aktyèl la sou yon sèvis odyo difizyon oswa podcast hosting motè. Epi ... asire w ke lame ou sipòte SSL (yon https: // chemen) ... yon blog ki anime byen pa pral jwe yon dosye odyo ki pa anime byen yon lòt kote.

Sa te di, li ou konnen ki kote dosye ou, entegre li nan yon pòs blog se byen senp. WordPress gen pwòp li yo HTML5 odyo jwè bati dirèkteman nan li pou ou kapab sèvi ak yon shortcode yo montre jwè la.

Isit la nan yon egzanp ki soti nan yon Episode podcast resan mwen te fè:

Avèk iterasyon an dènye nan editè a Gutenberg nan WordPress, mwen jis kole chemen an dosye odyo ak editè a aktyèlman kreye shortcode la. Shortcode aktyèl la swiv, kote ou ta ranplase src la ak URL la plen nan dosye a ou vle jwe.

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

WordPress sipòte kalite dosye mp3, m4a, ogg, wav, ak wma. Ou ka menm gen yon shortcode ki bay yon fallback nan evènman an ou gen vizitè lè l sèvi avèk navigatè ki pa sipòte youn oswa lòt la:

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

Ou ka amelyore shortcode la kòm byen ak lòt opsyon:

  • bouk - yon opsyon pou boukle odyo a.
  • autoplay - yon opsyon pou otomatikman jwe dosye a le pli vit ke li chaje.
  • precharge - yon opsyon pou precharge dosye odyo a ak paj la.

Mete li tout ansanm ak isit la nan sa ou jwenn:

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

Odyo Playlists nan WordPress

Si ou vle gen yon playlist, WordPress pa kounye a sipòte ekstèn hosting nan chak nan dosye ou yo jwe, men yo ofri li si w ap hosting dosye odyo ou intern:

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

Genyen kèk solisyon yo deyò ke ou ka ajoute nan Tèm pitit ou a ki pral pèmèt ekstèn chaje dosye odyo.

Add RSS Podcast ou a Sidebar ou

Lè l sèvi avèk jwè a WordPress, mwen te ekri yon Plugin yo montre podcast ou otomatikman nan yon widje ankadre. Ou kapab li sou li isit la ak telechaje Plugin la soti nan depo WordPress la.

Pèrsonalizasyon nan WordPress Audio Player la

Kòm ou ka wè pa pwòp sit mwen an, jwè MP3 la se trè debaz nan WordPress. Sepandan, paske li nan HTML5, ou ka abiye l 'byen yon ti jan lè l sèvi avèk CSS. CSSIgniter te ekri yon leson patikilye gwo sou Pèrsonalizasyon jwè odyo a Se konsa, mwen pa pral repete li tout isit la ... men isit la se opsyon sa yo ou ka Customize:

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

Amelyore WordPress MP3 Player ou

Genyen tou kèk grefon peye pou montre odyo MP3 ou a nan kèk jwè odyo absoliman sansasyonèl:

Divilgasyon: Mwen ap itilize lyen afilye mwen pou grefon ki anwo yo atravè Codecanyon, yon sit kokenn Plugin ki gen grefon ki byen sipòte ak sèvis eksepsyonèl ak sipò.

Ki sa ou panse?

Sit sa a sèvi ak Akismet diminye Spam. Aprann kijan kòmantè ou a trete.