I-WordPress: Shumeka isidlali seMP3 kubhulogi lakho lokuthunyelwe

I-Blog Post MP3 Player ene-WordPress

Ngokwabelana nge-podcasting nokwabelana ngomculo kudlange kangaka ku-inthanethi, kunethuba elihle lokuthuthukisa ulwazi lwabavakashi bakho kusayithi lakho ngokufaka umsindo ngaphakathi kokuthunyelwe kwebhulogi lakho. Ngokujabulisayo, i-WordPress iyaqhubeka nokuguqula ukusekelwa kwayo kokufaka ezinye izinhlobo zemidiya - futhi mp3 amafayela angenye yalezo okulula ukuzenza!

Ngenkathi ukubonisa umdlali wengxoxo yakamuva muhle, ukusingatha ifayili lomsindo langempela kungahle kungabi kuhle. Iningi lababungazi bewebhu bezindawo zeWordPress azilungiselelwe ukusakazwa kwemidiya - ngakho-ke ungamangali uma uqala ukungenela kwezinye izingqinamba lapho ufinyelela khona imikhawulo ekusetshenzisweni komkhawulokudonsa noma izitebele zakho zomsindo ngokuphelele. Ngingancoma ukusingathwa kwefayela lomsindo langempela kusevisi yokusakaza yomsindo noma injini yokubamba i-podcast. Futhi… qiniseka ukuthi umphathi wakho uyayisekela i-SSL (i-https: // path)… i-blog ebanjwe ngokuphepha ngeke idlale ifayela lomsindo elingabanjelwe ngokuphepha kwenye indawo.

Lokho kusho, uyazi indawo yefayela lakho, ukulifaka kokuthunyelwe kwebhulogi kulula. I-WordPress inesidlali sayo somsindo se-HTML5 esakhelwe ngqo kuyo ukuze ukwazi ukusebenzisa i-shortcode ukukhombisa isidlali.

Nasi isibonelo esivela kusiqephu sakamuva se-podcast engisenzile:

Nge-iteration yakamuva yomhleli we-Gutenberg ku-WordPress, ngisanda kunamathisela indlela yefayela yomsindo futhi umhleli empeleni wadala i-shortcode. I-shortcode yangempela ilandela, lapho ungayifaka khona esikhundleni se-src nge-URL ephelele yefayela ofuna ukulidlala.

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

I-WordPress isekela i-mp3, m4a, ogg, wav, ne-wma filetypes. Ungaba ne-shortcode enikezela ukubuyela emuva uma kwenzeka unezivakashi ezisebenzisa iziphequluli ezingasekeli enye noma enye:

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

Ungayithuthukisa i-shortcode kanye nezinye izinketho:

  • iluphu - inketho yokukhipha umsindo.
  • ukuzidlalela - inketho yokudlala ifayili ngokuzenzakalela ngokushesha nje lapho ilayisha.
  • preload - inketho yokulayisha kuqala ifayela lomsindo nekhasi.

Hlanganisa konke nakhu okutholayo:

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

Uhlu lwadlalwayo lomsindo ku-WordPress

Uma ufuna ukuba nohlu lokudlalwayo, i-WordPress okwamanje ayisekeli ukusingathwa kwangaphandle kwefayela lakho ngalinye ozolidlala, kepha bayakunikela uma ubamba amafayela wakho alalelwayo ngaphakathi:

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

Bangu ezinye izixazululo ngaphandle lapho ongangeza ku-Ingqikithi yakho Yezingane ezokwenza amandla okulayishwa kwangaphandle kwefayela lomsindo.

Faka Okuphakelayo Kwakho Kwe-RSS ku-Sidebar Yakho

Ngisebenzisa isidlali seWordPress, ngabhala i-plugin ukubonisa i-podcast yakho ngokuzenzakalela kuwijethi eseceleni. Ungakwazi Funda ngalokhu lapha futhi landa i-plugin kusuka endaweni yokugcina ye-WordPress.

Ukwenza ngokwezifiso i-WordPress Audio Player

Njengoba ukwazi ukubona ngesiza sami uqobo, isidlali seMP3 siyisisekelo esihle kuWordPress. Kodwa-ke, ngoba iyi-HTML5, ungayigqoka kancane usebenzisa i-CSS. I-CSSIgniter ibhale isifundo esihle ku- ukwenza ngezifiso isidlali somsindo ngakho-ke angizukuphinda konke lapha… kepha nazi izinketho ongazenza ngezifiso:

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

Thuthukisa i-WordPress Player yakho ye-WordPress

Kukhona namanye ama-plugins akhokhelwayo wokubonisa umsindo wakho we-MP3 kwezinye izidlali zomsindo ezimangalisa ngokuphelele:

Ukudalula: Ngisebenzisa izixhumanisi zami ezihambisanayo zama-plugins angenhla nge Codecanyon, indawo enhle ye-plugin enama-plugins asekelwa kahle kanye nensizakalo nokusekelwa okuvelele.

UCABANGANI?

Le sayithi isebenzisa i-Akismet ukunciphisa ugaxekile. Funda ukuthi idatha yakho yokuphawula isetshenziswa kanjani.