WordPress: Isulud sa usa ka MP3 Player sa Imong Blog Post

Blog Post MP3 Player nga adunay WordPress

Uban sa pag-podcast ug pag-ambit sa musika nga kaylap sa online, adunay usa ka maayong higayon aron mapaayo ang kasinatian sa imong mga bisita sa imong site pinaagi sa pag-embed sa audio sa sulud sa imong mga post sa blog. Mapasalamaton, ang WordPress nagpadayon sa pagbag-o sa suporta niini alang sa pag-embed sa uban pang mga lahi sa media - ug mp3 Ang mga file usa sa mga dali buhaton!

Samtang ang pagpakita sa usa ka magdudula alang sa usa ka bag-o nga interbyu maayo kaayo, ang pag-host sa tinuud nga audio file mahimong dili maayo. Kadaghanan sa mga host sa web alang sa mga site sa WordPress wala ma-optimize alang sa streaming media - busa ayaw katingala kung nagsugod ka sa pagdagan sa pipila ka mga isyu diin naigo ang mga limitasyon sa paggamit sa bandwidth o tanan nga mga audio stall nimo. Girekomenda nako ang pag-host sa tinuud nga audio file sa usa ka audio streaming service o podcast hosting engine. Ug… siguruha nga gisuportahan sa imong host ang SSL (usa ka https: // path)… usa ka blog nga luwas nga gidumala nga dili magpatugtog usa ka audio file nga dili luwas nga gi-host sa ubang lugar.

Ingon niana, nahibal-an nimo ang lokasyon sa imong file, isulud kini sa usa ka post sa blog nga yano ra. Ang WordPress adunay kaugalingon nga HTML5 audio player nga gitukod diretso niini aron makagamit ka usa ka shortcode aron maipakita ang magdudula.

Ania ang usa ka pananglitan gikan sa usa ka bag-o nga yugto sa podcast nga akong gibuhat:

Sa labing bag-o nga pag-ulit sa editor sa Gutenberg sa WordPress, gipapilit ko lang ang audio file path ug ang editor ang naghimo gyud sa shortcode. Nagsunod ang tinuud nga shortcode, diin imong ilisan ang src sa tibuuk nga URL sa file nga gusto nimo ipatugtog.

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

Gisuportahan sa WordPress ang mga filetyp nga mp3, m4a, ogg, wav, ug wma. Mahimo ka usab adunay usa ka shortcode nga naghatag usa ka fallback sa panghitabo nga adunay ka mga bisita nga naggamit mga browser nga dili mosuporta sa usa o sa uban pa:

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

Mahimo nimo mapaayo ang shortcode ingon man uban pa nga kapilian:

  • loop - usa ka kapilian alang sa pag-loop sa audio.
  • autoplay - usa ka kapilian alang sa awtomatiko nga pagpatokar sa file dayon kini mag-load.
  • preload - usa ka kapilian aron ma-preload ang audio file uban ang panid.

Panaghiusa tanan ug ani kung unsa ang makuha nimo:

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

Mga Playlist sa Audio sa WordPress

Kung gusto nimo adunay usa ka playlist, dili karon gisuportahan sa WordPress ang external nga pag-host sa matag usa sa imong mga file aron ipatugtog, apan gitanyag nila kini kung gi-host nimo ang imong mga audio file sa sulud:

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

Adunay pipila nga mga solusyon didto nga mahimo nimong madugang sa imong Tema sa Bata nga makahimo sa pag-load sa gawas nga audio file.

Idugang ang Imong Podcast RSS Feed Sa Imong Sidebar

Gamit ang magdudula sa WordPress, nagsulat ako usa ka plugin aron maipakita ang imong podcast nga awtomatiko sa usa ka sidebar widget. Mahimo nimo basaha ang bahin dinhi ug i-download ang plugin gikan sa repository sa WordPress.

Pagpasadya sa WordPress Audio Player

Sama sa nakita nimo sa akong kaugalingon nga site, ang MP3 player medyo sukaranan sa WordPress. Bisan pa, tungod kay kini ang HTML5, mahimo nimo kini nga pagbistihan gamay gamit ang CSS. Ang CSSIgniter nagsulat usa ka maayong panudlo gipasadya ang audio player busa dili ko pag-usabon kini tanan dinhi… apan ania ang mga kapilian nga mahimo nimo ipasadya:

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

Pagpalambo sa Imong WordPress MP3 Player

Adunay usab pipila nga mga bayad nga plugin alang sa pagpakita sa imong MP3 audio sa pipila nga hingpit nga makabungog nga mga audio player:

Pagpadayag: Gigamit nako ang akong mga kauban nga link alang sa mga sa taas nga mga plugin pinaagi sa Codecanyon, usa ka hinanduraw nga site sa plugin nga adunay maayong pagsuporta sa mga plugin ug talagsaong serbisyo ug suporta.

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.