WordPress: txertatu MP3 erreproduzitzailea zure blogeko mezuan

Blogeko MP3 erreproduzitzailea WordPress-ekin

Podcastak eta musika partekatzea sarean hain nagusi direnez, bisitarien esperientzia zure gunean hobetzeko aukera bikaina dago zure blogeko mezuetan audioa txertatuz. Zorionez, WordPress-ek beste euskarri mota batzuk txertatzeko laguntza garatzen jarraitzen du mp3 fitxategiak egiteko errazak diren horietakoak dira!

Azken elkarrizketarako erreproduzitzaile bat erakustea oso ona den arren, agian ez da komenigarria benetako audio fitxategia ostatatzea. WordPress webguneetarako web ostalari gehienak ez daude optimizatutako multimedia erreproduzitzeko. Beraz, ez zaitez harritu banda zabalera erabiltzeko mugak edo zure audio postuak guztiz mugatzen dituzun arazo batzuekin hasten bazara. Benetako audio fitxategia audio erreproduzitzeko zerbitzu batean edo podcastak ostatatzeko motor batean ostatatzea gomendatuko nuke. Eta ... ziurtatu zure ostalariak SSL (https: // bidea) onartzen duela ... modu seguruan ostatatutako blogak ez duela beste nonbait modu seguruan ostatatutako audio fitxategirik erreproduzituko.

Hori bai, zure fitxategiaren kokapena ezagutzen baduzu, blogeko mezu batean txertatzea nahiko erraza da. WordPress-ek bere HTML5 audio erreproduzitzailea du zuzenean bertan, beraz, kode labur bat erabil dezakezu erreproduzitzailea bistaratzeko.

Hona hemen egin nuen podcast atal baten adibide bat:

WordPress-eko Gutenberg editorearen azken errepikapenarekin, audio fitxategiaren bidea itsatsi berri dut eta editoreak kode laburra sortu du. Benetako kode laburra dator, src erreproduzitu nahi duzun fitxategiaren URL osoarekin ordeztuko zenuke.

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

WordPress-ek mp3, m4a, ogg, wav eta wma fitxategi motak onartzen ditu. Bat edo bestea onartzen ez duten arakatzaileak erabiltzen dituzten bisitariak izanez gero, irtenbide bat ematen duen kode labur bat ere izan dezakezu:

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

Kode laburra hobetu dezakezu beste aukera batzuekin:

  • loop - audioa begiztatzeko aukera.
  • erreprodukzio automatikoa - fitxategia kargatu bezain laster erreproduzitzeko aukera.
  • preload - audio fitxategia orriarekin aurrez kargatzeko aukera.

Bildu dena eta hona hemen zer lortzen duzun:

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

WordPress-eko audio erreprodukzio zerrendak

Erreprodukzio zerrenda bat eduki nahi baduzu, WordPressek ez du erreproduzitzeko zure fitxategi bakoitzaren kanpoko ostalaritza onartzen, baina zure audio fitxategiak barnean ostatatzen badituzu eskaintzen dute:

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

Badaude irtenbide batzuk kanpoko audio fitxategia kargatzea ahalbidetuko duen zure Haur Gaiari gehi diezaiokezu.

Gehitu zure Podcast RSS jarioa zure alboko barran

WordPress erreproduzitzailea erabiliz, zure podcasta alboko barrako widget batean automatikoki erakusteko plugin bat idatzi nuen. Ahal duzu hemen irakurri deskargatu plugina WordPress biltegitik.

WordPress Audio erreproduzitzailearen pertsonalizazioa

Nire webgunean ikus dezakezun moduan, MP3 erreproduzitzailea nahiko oinarrizkoa da WordPress-en. Hala ere, HTML5 denez, nahiko mozorrotu dezakezu CSS erabiliz. CSSIgniter-ek tutorial bikaina idatzi du audio-erreproduzitzailea pertsonalizatzea beraz, ez dut dena errepikatuko hemen ... baina hona hemen pertsonaliza ditzakezun aukerak:

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

Hobetu zure WordPress MP3 erreproduzitzailea

Ordaindutako plugin batzuk ere badaude zure MP3 audioa audio erreproduzitzaile guztiz harrigarri batzuetan erakusteko:

Dibulgazioa: goiko pluginetarako nire afiliatuen estekak erabiltzen ari naiz Codecanyon, plugin gune zoragarria, ondo onartutako pluginak eta zerbitzu eta laguntza bikainak dituena.

Zer deritzozu?

Gune honek Akismet-ek spam erabiltzen du. Ikasi zure iruzkina nola prozesatu den.