„WordPress“: įdėkite MP3 grotuvą į savo tinklaraščio įrašą

Dienoraštyje įrašykite MP3 grotuvą su „WordPress“

Kai internete yra taip paplitę tinklalaidės ir dalijimasis muzika, yra puiki galimybė pagerinti lankytojų patirtį jūsų svetainėje įterpiant garsą į savo tinklaraščio įrašus. Laimei, „WordPress“ toliau plėtoja savo paramą įterpdama kitus medijos tipus - ir mp3 failai yra vieni iš tų, kuriuos lengva padaryti!

Nors grotuvo demonstravimas neseniai vykusiam pokalbiui yra puikus, tikrojo garso failo talpinimas gali būti nepatartinas. Dauguma žiniatinklio prieglobų, skirtų „WordPress“ svetainėms, nėra optimizuotos srautinei žiniasklaidai transliuoti, todėl nenustebkite, jei pradėsite spręsti kai kurias problemas, kai pasiekiate pralaidumo naudojimo apribojimus arba iš viso naudojate garso takelius. Patarčiau tikrąjį garso failą talpinti garso srauto tarnyboje arba tinklalaidės prieglobos variklyje. Ir ... įsitikinkite, kad jūsų kompiuteris palaiko SSL („https: //“ kelią) ... saugiai priglobtas tinklaraštis nepaleis garso failo, kuris nėra saugiai priglobtas kitur.

Tai reiškia, kad jūs žinote savo failo vietą, jį įdėti į tinklaraščio įrašą yra gana paprasta. „WordPress“ turi savo HTML5 garso grotuvą, įmontuotą tiesiai į jį, todėl grotuvui rodyti galite naudoti trumpąjį kodą.

Štai pavyzdys iš neseniai atlikto tinklalaidės epizodo, kurį padariau:

Su naujausia „Gutenberg“ redaktoriaus iteracija „WordPress“ tiesiog įklijavau garso failo kelią ir redaktorius iš tikrųjų sukūrė trumpąjį kodą. Toliau pateikiamas tikrasis trumpasis kodas, kuriame src pakeisite visu norimo paleisti failo URL.

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

„WordPress“ palaiko mp3, m4a, ogg, wav ir wma failų tipus. Jūs netgi galite turėti trumpąjį kodą, kuris suteikia atsarginę galimybę tuo atveju, jei lankytojai naudojasi naršyklėmis, kurios nepalaiko vienos ar kitos:

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

Trumpąjį kodą galite patobulinti naudodami kitas parinktis:

  • kilpa - garso ciklo parinktis.
  • automatinis paleidimas - galimybė automatiškai paleisti failą, kai tik jis įkeliamas.
  • išankstinis įkrovimas - galimybė iš anksto įkelti garso failą su puslapiu.

Sudėkite viską ir gausite štai ką:

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

Garso grojaraščiai „WordPress“

Jei norite turėti grojaraštį, „WordPress“ šiuo metu nepalaiko kiekvieno jūsų atkuriamo failo išorinio prieglobos, tačiau jie siūlo, jei garso failus laikote viduje:

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

yra kai kurie sprendimai ten, kurį galite pridėti prie savo vaiko temos, kuri leis įkelti išorinius garso failus.

Pridėkite savo „Podcast“ RSS kanalą prie šoninės juostos

Naudodamas „WordPress“ grotuvą, parašiau papildinį, kad jūsų tinklalaidė būtų automatiškai rodoma šoninės juostos valdiklyje. Tu gali apie tai skaitykite čia ir atsisiųskite papildinį iš „WordPress“ saugyklos.

„WordPress“ garso grotuvo pritaikymas

Kaip matote mano svetainėje, MP3 grotuvas yra gana paprastas „WordPress“. Tačiau, kadangi tai yra HTML5, galite jį nemažai aprengti naudodami CSS. „CSSIgniter“ parašė puikią pamoką pritaikyti garso grotuvą todėl viso to nekartosiu ... bet čia yra parinktys, kurias galite pritaikyti:

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

Patobulinkite savo „WordPress“ MP3 grotuvą

Taip pat yra keletas mokamų papildinių, skirtų jūsų MP3 garsui rodyti kai kuriuose nuostabiuose garso grotuvuose:

Atskleidimas: Aš naudoju savo filialo nuorodas aukščiau išvardytiems papildiniams per Codecanyon, fantastiška įskiepių svetainė, kurioje yra gerai palaikomi papildiniai ir nepaprastas aptarnavimas bei palaikymas.

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.