WordPress: Ua Ntej MP3 Player rau hauv Koj Cov Ntawv Blog

Blog Post MP3 Player nrog WordPress

Nrog podcasting thiab suab paj nruag sib koom thiaj li nthuav dav hauv online, muaj lub sijhawm zoo los txhim kho koj cov neeg tuaj saib kev paub ntawm koj lub xaib los ntawm kev tso suab nyob rau hauv koj cov ntawv blog. Thankfully, WordPress txuas ntxiv los txhim kho nws cov kev txhawb nqa rau kev teeb tsa lwm cov hom xov xwm - thiab mp3 cov ntaub ntawv yog ib qho ntawm cov uas yooj yim ua!

Thaum lub sijhawm tso cov neeg uas ua ntawv rau kev sib tham tsis ntev los no tau zoo, khaws cov ntaub ntawv tiag tiag yuav siv tsis tau. Feem ntau lub vev xaib rau WordPress cov chaw tsis muaj qhov zoo rau kev tshaj tawm xov xwm - yog li tsis txhob xav tsis thoob yog tias koj pib khiav mus rau qee qhov teeb meem uas koj ntaus cov kev txwv ntawm kev siv bandwidth lossis koj lub suab muag tag nrho. Kuv xav hais qhia lub suab tiag tiag rau ntawm audio audio service lossis podcast hosting engine. Thiab… nco ntsoov tias koj tus tswv tsev txhawb SSL (ib qho https: // path)… blog uas tau ruaj ntseg yuav tsis ua yeeb yaj kiab audio uas tsis tau txais kev nyab xeeb rau lwm qhov.

Ntawd tau hais tias, nws koj paub qhov chaw ntawm koj cov ntaub ntawv, khaws nws rau hauv cov ntawv blog yog qhov yooj yim heev. WordPress nws muaj nws tus kheej HTML5 audio player ua ncaj nraim rau nws yog li koj tuaj yeem siv tus lej kab ntawv los tso saib tus neeg uas ua ntawv.

Ntawm no yog ib qho piv txwv los ntawm podcast tsis ntev los no uas kuv tau ua:

Nrog qhov tseeb ntawm kev tawm suab ntawm Gutenberg editor hauv WordPress, Kuv tsuas yog dhau los tso cov suab ntawm cov kab ntawv thiab tus editor tau tsim qhov shortcode. Qhov tiag tiag shortcode raws li, qhov uas koj yuav hloov hloov src nrog tag nrho URL ntawm cov ntaub ntawv koj xav tau ua si.

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

WordPress txhawb nqa mp3, m4a, ogg, wav, thiab wma filetypes. Koj tuaj yeem txawm muaj ib qho shortcode uas qhia txog qhov poob qis hauv qhov xwm txheej koj muaj cov neeg tuaj xyuas siv browser uas tsis txhawb ib lossis lwm yam:

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

Koj tuaj yeem txhim kho qhov shortcode zoo li nrog lwm cov kev xaiv:

  • voj - ib qho kev xaiv rau looping lub suab.
  • autoplay - ib qho kev xaiv rau kev ua si ntawm cov ntawv tam sim ntawd thaum nws thauj khoom.
  • preload - ib qho kev xaiv los preload cov suab nrog rau nplooj ntawv.

Tso nws tag nrho ua ke thiab ntawm no yog qhov koj tau txais:

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

Cov Ntawv Teev Ua Suab Nkauj hauv WordPress

Yog tias koj xav kom muaj daim ntawv teev npe, WordPress tsis tam sim no txhawb sab nraud ntawm txhua qhov ntawm koj cov ntaub ntawv los ua si, tab sis lawv muab nws yog tias koj tab tom muab koj cov ntaub ntawv kaw rau hauv:

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

muaj qee qhov kev daws teeb meem qhov ntawd koj tuaj yeem ntxiv rau koj Tus Menyuam Cov Ntsiab Lus uas yuav ua kom lub suab xa tawm sab nraud.

Ntxiv Koj Podcast RSS Pub Rau Koj Sab

Siv tus neeg uas ua ntawv WordPress, Kuv tau sau ib lub plugin los qhia koj cov ntawv cim qhia podcast nyob hauv ib txoj kab ke ncaj qha. Koj ua tau nyeem txog nws ntawm no thiab rub lub plugin los ntawm WordPress chaw cia khoom.

Kev Txhawb Nqa ntawm WordPress Audio Player

Raws li koj tuaj yeem pom los ntawm kuv tus kheej lub vev xaib, lub MP3 player yog qhov pib zoo nkauj hauv WordPress. Txawm li cas los xij, vim tias nws yog HTML5, koj tuaj yeem hnav nws me ntsis siv CSS. CSSIgniter tau sau cov ntawv qhia zoo rau customizing lub audio player yog li kuv yuav tsis rov ua tag nrho ntawm no… tab sis ntawm no yog cov kev xaiv uas koj tuaj yeem hloov kho:

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

Txhim Kho Koj Lub vev xaib WordPress MP3 Player

Kuj tseem muaj qee qhov them nyiaj plugins rau kev teeb tsa koj lub suab MP3 hauv qee cov neeg tawm suab txaus siab:

Kev Tshaj Tawm: Kuv tab tom siv kuv cov lus qhia sib txuas rau lub plugins sab saum toj ntawm Codecanyon, lub vev xaib plugin zoo heev uas muaj kev pabcuam zoo plugins thiab kev pabcuam zoo thiab txhawb nqa.

Yuav ua li cas koj xav hais tias?

Qhov Web site no siv Akismet los txo cov kev pabcuam. Kawm li cas koj cov ntaub ntawv tawm tswv yim tiav.