WordPress: Ugradite MP3 uređaj u svoj blog post

Blog Post MP3 Player sa WordPressom

Uz tako rasprostranjene podcastinge i razmjenu muzike na mreži, postoji sjajna prilika da poboljšate iskustvo posjetitelja na svojoj web lokaciji ugrađivanjem zvuka u postove na blogu. Srećom, WordPress nastavlja razvijati svoju podršku za ugrađivanje drugih vrsta medija - i mp3 datoteke su jedne od onih koje je lako učiniti!

Iako je prikazivanje playera za nedavni intervju sjajno, hosting stvarne audio datoteke možda nije preporučljiv. Većina web hostova za WordPress web lokacije nisu optimizirani za strujanje medija - zato nemojte se iznenaditi ako počnete nailaziti na neke probleme u kojima dolazite do ograničenja propusnosti ili zvučnih kablova. Preporučio bih hosting stvarne audio datoteke na usluzi audio streaminga ili na mehanizmu za hosting podcasta. I ... budite sigurni da vaš domaćin podržava SSL (https: // putanja) ... blog koji je sigurno hostiran neće reproducirati audio datoteku koja nije sigurno hostirana negdje drugdje.

To znači da ako znate lokaciju svoje datoteke, ugraditi je u blog post je vrlo jednostavno. WordPress ima svoj HTML5 audio uređaj ugrađen direktno u njega, tako da možete koristiti kratki kod za prikaz uređaja.

Evo primjera iz nedavne epizode podcasta koju sam radio:

S najnovijom iteracijom Gutenbergovog uređivača u WordPressu, upravo sam zalijepio put do audio datoteke i urednik je zapravo kreirao kratki kôd. Slijedi stvarni kratki kod, gdje biste zamijenili src punim URL-om datoteke koju želite reproducirati.

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

WordPress podržava mp3, m4a, ogg, wav i wma datoteke. Možete čak imati i kratki kôd koji pruža rezervni slučaj u slučaju da posjetitelji koriste preglednike koji ne podržavaju jedan ili drugi:

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

Kratki kod možete poboljšati i drugim opcijama:

  • petlja - opcija za ponavljanje zvuka.
  • automatska reprodukcija - opcija za automatsko reproduciranje datoteke čim se učita.
  • prethodno učitavanje - opcija za prethodno učitavanje audio datoteke sa stranicom.

Sve to spojite i evo šta ćete dobiti:

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

Audio plejliste u WordPressu

Ako želite imati popis za reprodukciju, WordPress trenutno ne podržava eksterno hostiranje svake vaše datoteke za reprodukciju, ali nude je ako interno hostirate audio datoteke:

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

Oni su neka rješenja tamo možete dodati svojoj dječjoj temi koja će omogućiti vanjsko učitavanje audio datoteka.

Dodajte svoj RSS feed za Podcast na bočnu traku

Koristeći WordPress player, napisao sam dodatak za automatski prikaz vašeg podcasta u widgetu bočne trake. Možeš pročitajte o tome ovdje i preuzmite dodatak iz spremišta WordPress.

Prilagođavanje WordPress audio uređaja

Kao što vidite na mojoj web stranici, MP3 uređaj je prilično osnovni u WordPressu. Međutim, budući da je HTML5, možete ga prilično dotjerati pomoću CSS-a. CSSIgniter je napisao odličan tutorial o prilagođavanje audio uređaja pa neću sve ovdje ponavljati ... ali evo opcija koje možete prilagoditi:

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

Poboljšajte svoj WordPress MP3 uređaj

Postoje i neki dodaci koji se plaćaju za prikazivanje vašeg MP3 zvuka u nekim apsolutno zapanjujućim audio uređajima:

Objava: Koristim svoje povezane veze za gore navedene dodatke putem Codecanyon, fantastična web lokacija s dodatcima koja ima dobro podržane dodatke i izvanrednu uslugu i podršku.

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.