WordPress: Ugradite MP3 uređaj u svoj blog post

Blog Post MP3 Player s WordPressom

S tako rasprostranjenim podcastingom i dijeljenjem glazbe tako da postoji izvrsna 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 izvrsno, hosting stvarne audio datoteke možda neće biti preporučljiv. Većina web hostova za WordPress web stranice nisu optimizirani za streaming medija - zato se nemojte iznenaditi ako počnete nailaziti na neke probleme u kojima dolazite do ograničenja propusnosti ili zvučnih kabina. 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: // put) ... blog koji je sigurno hostiran neće reproducirati audio datoteku koja nije sigurno hostirana negdje drugdje.

Usprkos tome, ako znate gdje se nalazi vaša datoteka, ugraditi je u blog post je vrlo jednostavno. WordPress ima svoj vlastiti HTML5 audio player ugrađen izravno u njega, tako da možete koristiti kratki kôd za prikaz playera.

Evo primjera iz nedavne epizode podcasta koju sam radio:

S najnovijom iteracijom Gutenbergovog uređivača u WordPressu, upravo sam zalijepio put audio datoteke i urednik je zapravo stvorio kratki kôd. Slijedi stvarni kratki kod, gdje biste src zamijenili 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 zamjenski 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 što ćete dobiti:

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

Audio popisi za reprodukciju u WordPressu

Ako želite imati popis za reprodukciju, WordPress trenutačno ne podržava vanjsko hostiranje svake vaše datoteke za reprodukciju, ali nude ga ako interno hostirate audio datoteke:

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

Tamo 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 Podcasta na bočnu traku

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

Prilagođavanje WordPress audio playera

Kao što vidite na mojoj vlastitoj 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 sjajan tutorial o prilagođavanje audio uređaja pa neću ovdje sve 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čno mjesto za dodatke koje ima dobro podržane dodatke i izvanrednu uslugu i podršku.

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.