WordPress: Sanya MP3 Player a cikin Rubutun Ku

Blog Post MP3 Player tare da WordPress

Tare da watsa shirye-shirye da kuma raba kide kide sosai a yanar gizo, akwai babbar dama don bunkasa kwarewar maziyarta a shafin ka ta hanyar sanya sauti a cikin sakonnin ka. Abin godiya, WordPress yana ci gaba da haɓaka tallafinta don saka wasu nau'ikan kafofin watsa labarai - kuma mp3 fayiloli suna ɗaya daga cikin waɗanda suke da sauƙin aiwatarwa!

Yayin nuna ɗan wasa don hira ta kwanan nan yana da kyau, karɓar ainihin fayil ɗin mai jiwuwa bazai zama mai kyau ba. Yawancin rundunonin yanar gizo don shafukan WordPress ba'a inganta su ba don kafofin watsa labarai masu gudana - don haka kar kuyi mamaki idan kuka fara shiga cikin wasu batutuwa inda kuka iyakance iyakan amfani da bandwidth ko rumfan ku gaba ɗaya. Zan ba da shawarar karɓar ainihin fayil ɗin mai jiwuwa a kan sabis ɗin gudana na sauti ko injin adana fayilolin Podcast. Kuma… tabbata cewa mai masaukinka yana tallafawa SSL (hanyar https: // hanya)… blog da aka shirya cikin aminci ba zai kunna fayil ɗin odiyo wanda ba a karɓar bakuncin amintacce a wani wuri ba.

Wannan ya ce, kun san wurin da fayil ɗinku yake, saka shi a cikin gidan yanar gizo abu ne mai sauƙi. WordPress yana da nasa kayan kunnawa na HTML5 wanda aka gina kai tsaye a ciki don haka zaka iya amfani da lambar hanya don nuna mai kunnawa.

Ga misali daga labarin kwasfan fayilolin kwanan nan da nayi:

Tare da sabon bayanin edita na Gutenberg a cikin WordPress, kawai na manna hanyar fayil ɗin mai jiwuwa kuma editan ainihin ƙirƙirar gajeriyar hanya. Ainihin lambar gajeriyar hanya ta biyo baya, inda zaku maye gurbin src tare da cikakken URL na fayil ɗin da kuke son kunnawa.

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

WordPress yana goyan bayan mp3, m4a, ogg, wav, da wma. Kuna iya samun lambar gajeriyar hanya wacce ke samar da koma baya a yayin da kuke da baƙi ta amfani da masu bincike waɗanda basa goyan bayan ɗayan ko ɗayan:

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

Kuna iya haɓaka lambar gajeriyar hanya tare da sauran zaɓuɓɓuka:

  • madauki - wani zaɓi don ƙaddamar da sautin.
  • autoplay - zaɓi don kunna fayil ɗin kai tsaye da zarar ya ɗora.
  • preload - zaɓi don preload fayil ɗin odiyo tare da shafin.

Haɗa shi duka kuma ga abin da kuka samu:

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

Lissafin waƙa a cikin WordPress

Idan kuna son samun jerin waƙoƙi, WordPress a halin yanzu baya tallafawa karɓar bakuncin kowane fayilolinku don kunna, amma suna bayar da shi idan kuna karɓar fayilolin odiyo ɗinku a ciki:

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

akwai wasu mafita a can can da zaka iya ƙarawa zuwa Jigo na Yaro wanda zai ba da damar shigar da fayil ɗin odiyo na waje.

Yourara Ciyarwar RSS na Podcast zuwa Yankin Yankin

Ta amfani da WordPress player, Na rubuta plugin don nuna kwasfan fayiloli kai tsaye a cikin widget din gefe. Za ki iya karanta game da shi a nan da kuma zazzage kayan aikin daga mangaza na WordPress.

Gyare-gyare na WordPress Audio Player

Kamar yadda kake gani ta shafin kaina, mai kunna MP3 yana da kyau sosai a cikin WordPress. Koyaya, saboda HTML5 ne, zaku iya sa shi sosai ta amfani da CSS. CSSIgniter ya rubuta babban koyawa akan keɓance na'urar kunna sauti don haka ba zan sake maimaita shi duka anan ba… amma ga zaɓuɓɓukan da zaku iya siffanta su:

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

Haɓaka WordPressan Wasan MP3 na WordPress

Hakanan akwai wasu karin kuɗi da aka biya don nuna sautunan MP3 ɗinku a cikin wasu 'yan wasan mai ji daɗi sosai

Bayyanawa: Ina amfani da haɗin haɗin gwiwa na don abubuwan haɗin da ke sama ta hanyar Codecanyon, wani shafin yanar gizo mai kayatarwa mai matukar tallafi wanda yake da tallafi sosai da ingantaccen sabis da tallafi.

Me kuke tunani?

Wannan shafin yana amfani da Akismet don rage spam. Koyi yadda aka sarrafa bayanan bayaninka.