WordPress: Manusta oma blogipostitusse MP3-mängija

Blogipostituse MP3-mängija WordPressiga

Kuna veebis on nii levinud taskuhääling ja muusika jagamine, on suurepärane võimalus oma külastajate kogemusi oma saidil täiendada, kinnistades heli oma ajaveebipostitustesse. Õnneks arendab WordPress oma tuge teiste meediumitüüpide - ja mp3 failid on üks neist, mida on lihtne teha!

Kuigi mängija kuvamine hiljutise intervjuu jaoks on suurepärane, ei pruugi tegeliku helifaili majutamine olla soovitatav. Enamik WordPressi saitide veebimajutajaid pole meediumide voogesituse jaoks optimeeritud - seega ärge imestage, kui hakkate kokku puutuma mõne probleemiga, kus te ribalaiuse kasutamise piiranguid ületate või olete oma helipeatustes üldse. Ma soovitaksin tegelikku helifaili majutada heli voogedastusteenuses või taskuhäälingusaates. Ja ... veenduge, et teie host toetab SSL-i (https: // tee) ... turvaliselt hostitud ajaveeb ei esita helifaili, mida mujal turvaliselt pole.

See tähendab, et kui teate oma faili asukohta, on see blogipostitusse kinnistamine üsna lihtne. WordPressil on otse sisse ehitatud oma HTML5-helipleier, et saaksite mängija kuvamiseks kasutada lühikoodi.

Siin on näide hiljutisest tehtud taskuhäälingusaatest:

Gutenbergi redaktori uusima iteratsiooni abil WordPressis kleepisin just helifaili tee ja redaktor lõi tegelikult lühikoodi. Järgneb tegelik lühikood, kus asendate src mängitava faili täieliku URL-iga.

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

WordPress toetab mp3-, m4a-, ogg-, wav- ja wma-failitüüpe. Teil võib olla isegi lühikood, mis pakub varukoopiat juhul, kui külastajatel on brausereid, mis ei toeta üht ega teist.

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

Lühikoodi saate täiendada ka muude võimalustega:

  • loop - heli loopimise võimalus.
  • automaatne esitus - faili automaatse esitamise võimalus kohe pärast selle laadimist.
  • eellaadimine - helifaili koos lehega eellaadimise võimalus.

Pange see kõik kokku ja saate järgmist:

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

Heli esitusloendid WordPressis

Kui soovite, et teil oleks esitusloend, ei toeta WordPress praegu iga teie faili esitamiseks välishostimist, kuid nad pakuvad seda siiski, kui haldate oma helifaile sisemiselt:

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

Seal on mõned lahendused seal, mida saate lisada oma lapseteemale, mis võimaldab välise helifaili laadimist.

Lisage oma Podcasti RSS-kanal oma külgribale

Kasutades WordPressi mängijat, kirjutasin pistikprogrammi, et kuvada teie taskuhäälingusaadet automaatselt küljeriba vidinas. Sa saad loe selle kohta siit ja laadige pistikprogramm alla WordPressi hoidlast.

WordPressi helipleieri kohandamine

Nagu minu enda saidi järgi näete, on MP3-mängija WordPressis üsna lihtne. Kuna see on HTML5, saate selle CSS-i abil üsna palju riidesse panna. CSSIgniter on kirjutanud suurepärase õpetuse helipleieri kohandamine nii et ma ei korda seda kõike siin ... kuid siin on valikud, mida saate kohandada:

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

Täiustage oma WordPressi MP3-mängijat

MP3-heli kuvamiseks mõnes täiesti uimastatavas helipleieris on ka mõned tasulised pistikprogrammid:

Avalikustamine: ma kasutan ülaltoodud pistikprogrammide jaoks oma sidusreklaamide linke Codecanyon, fantastiline pistikprogrammisait, millel on hästi toetatud pistikprogrammid ning silmapaistev teenus ja tugi.

Mis sa arvad?

Sellel saidil kasutatakse rämpsposti vähendamiseks Akismetit. Vaadake, kuidas teie andmeid töödeldakse.