WordPress: Di Blogandina Blog-a Xwe de MP3 Player-ê bicîh bikin

Bi WordPress re MP3 Player-ê bi Blog re bişînin

Bi podcasting û parvekirina muzîkê re ku li serhêl pir zêde serdest in, firsendek mezin heye ku ezmûna mêvanên xwe li ser malpera xwe bi danîna bihîstwerê di navnîşanên tevnvîsa xwe de zêde bikim. Ji kerema xwe, WordPress piştgiriya xwe ya ji bo bicîhkirina cûreyên din ên medyayê berdewam dike - û mp3 pel yek ji wan in ku hêsan têne çêkirin!

Dema ku ji bo hevpeyivînek vê paşîn lîstikvanek xuya dike pir baş e, dibe ku mêvandariya pelê bihîstwerê rastîn neyê şîret kirin. Piraniya malperên ji bo malperên WordPress ji bo weşana medyayê ne çêtirîn in - ji ber vê yekê hûn şaş nemînin ku hûn dest pê bikin li hin mijarên ku hûn li sînorên karanîna bandwîdthê an bi tevahî dezgehên bihîstwerê xwe radikin. Ez pêşniyar dikim ku pelê bihîstwerê rastîn li ser karûbarek weşana bihîstwerî an motora mêvandariya podcastê mêvandar bikim. …… Pê ewle bine ku mêvandarê we piştgirî dide SSL (https: // rê)… blogek ku bi ewlehî tê mêvandarkirin dê pelê bihîstwerê ku bi ewlehî li cîhek din nehatiye mêzekirin, bilîze.

Got, ew dizanin ku hûn cîhê pelê xwe dizanin, bicîhkirina wê di posta tevnvîsek de hêsan e. WordPress xwedan lîstikvanek bihîstwerê xweya HTML5 heye ku rasterast tê de çêkirî ye ku hûn dikarin kurtek kodek bikar bînin da ku lîstikvan nîşan bide.

Li vir mînakek ji beşa podcasta dawî ya ku min kir ev e:

Bi vegotina herî dawî ya edîtorê Gutenberg-ê di WordPress-ê de, min tenê riya pelê audio lê kir û edîtor bi rastî kurter-kod çêkir. Kurter-kodê rastîn dişopîne, ku hûn ê li wir src-ê bi URL-ya tevahî ya pelê ku hûn dixwazin lîstî biguherînin.

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

WordPress pelên pelên mp3, m4a, ogg, wav, û wma piştgirî dike. Dibe ku hûn kurtek-kodek hebin ku di bûyera ku we mêvan hene gerokên ku yek an yeka din piştgirî nakin de paşketinek peyda dike hebe:

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

Hûn dikarin kurter-kodê û her weha bi vebijarkên din jî zêde bikin:

  • loop - vebijarkek ji bo looping audio.
  • otoplay - vebijarkek ji bo ku pel pelika ku zû tê barkirin bixweber tê lîstin.
  • preload - vebijarkek ku pelê bihîstwerê bi rûpelê re pêşî lê bike.

Hemiyan li hev bicivînin û ya ku hûn bistînin ev e:

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

Di WordPress-ê de Lîsteyên Playlîskê

Heke hûn dixwazin lîsteyek we hebe, WordPress naha piştgiriyê nade mêvandariya derveyî ya her pelê we ku were lîstin, lê ew pêşkêşî dikin heke hûn pelên xweyên bihîstwerê navxweyî mêvandar bikin:

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

Heye hin çareserî li wê derê ku hûn dikarin li Mijara xweya Zarokê ku dê barkirina pelê bihîstwerê derveyî bikar bîne zêde bikin.

RSS-ya Podcast-a xwe li kêleka xwe zêde bikin

Bi karanîna lîstikvanê WordPress-ê, min pêvekek nivîsî da ku podcast-a we bixweber di widget-a sidebar de nîşan bide. Hûn dikarin li vir bixwînin û pêvekê dakêşin ji embara WordPress-ê.

Customization of WordPress Audio Player

Wekî ku hûn ji hêla malpera xwe ve jî dibînin, MP3 player di WordPress-ê de pir bingehîn e. Lêbelê, ji ber ku ew HTML5 e, hûn dikarin bi karanîna CSS hinekî wê li xwe bikin. CSSIgniter li ser tutoriyek mezin nivîsandiye xwerû player audio ji ber vê yekê ez ê her tiştî li vir dubare nekim… lê vebijarkên ku hûn dikarin xwerû bikin li vir hene:

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

MP3 Player-a Xweya WordPress-ê Berztir Bikin

Di heman demê de hin pêvekên dravî jî hene ku ji bo nîşandayîna bihîstwera MP3-ya we li hin lîstikvanên bihîstwerê bi tevahî ecêb:

Daxuyanî: Ez ji bo pêvekên jorîn bi navgîniyê girêdanên xweyên parmendî bikar tînim Codecanyon, Malpera pêvekek fantastîk ku pêvekên baş-piştgirî û karûbar û piştgiriyek berbiçav heye.

Hûn çi difikirin?

Ev malpera Akismet bikar tîne ku ji bo kêmkirina spam. Zêdetir agahdariya danûstandinên we çawa pêvajoy kirin.