WordPress: Fella MP3 spilara í bloggpóstinn þinn

Bloggfærsla MP3 spilara með WordPress

Með podcast og deili tónlist svo ríkjandi á netinu, þá er frábært tækifæri til að auka upplifun gesta þinna með því að fella hljóð inn í bloggfærslurnar þínar. Sem betur fer heldur WordPress áfram að þróa stuðning sinn við að fella aðrar fjölmiðlategundir - og mp3 skrár eru ein af þeim sem auðvelt er að gera!

Þó að það sé frábært að sýna leikmann fyrir nýlegt viðtal er ekki ráðlegt að hýsa raunverulegu hljóðskrána. Flestir vélar fyrir WordPress síður eru ekki bjartsýnir fyrir streymimiðla - svo ekki vera hissa ef þú byrjar að lenda í einhverjum málum þar sem þú lendir í takmörkum á bandbreiddarnotkun eða hljóðbásunum þínum að öllu leyti. Ég myndi mæla með því að hýsa raunverulegu hljóðskrána í hljóðstreymisþjónustu eða podcast hýsingarvél. Og ... vertu viss um að gestgjafinn þinn styðji SSL (https: // slóð) ... blogg sem er hýst á öruggan hátt mun ekki spila hljóðskrá sem ekki er hýst á öruggan hátt annars staðar.

Sem sagt, það sem þú veist staðsetningu skráar þinnar, að fella það inn í bloggfærslu er alveg einfalt. WordPress er með sinn eigin HTML5 hljóðspilara sem er innbyggður beint í það svo þú getir notað stuttkóða til að sýna spilarann.

Hér er dæmi um nýlegan podcast-þátt sem ég gerði:

Með nýjustu endurgerð Gutenberg ritstjórans á WordPress límdi ég hljóðskrárleiðina og ritstjórinn bjó til stuttkóðann. Raunverulegur skammkóði fylgir, þar sem þú myndir skipta SRC út fyrir alla vefslóð skráarinnar sem þú vilt spila.

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

WordPress styður mp3, m4a, ogg, wav og wma skjalategundir. Þú getur meira að segja haft stuttan kóða sem veitir varanleika ef þú heimsækir gesti með vöfrum sem styðja ekki einn eða neinn:

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

Þú getur aukið skammkóðann auk annarra valkosta:

  • lykkja - valkostur til að lykkja hljóðið.
  • sjálfspilun - valkostur til að spila skrána sjálfkrafa um leið og hún hlaðast.
  • forhlaða - valkostur til að endurhlaða hljóðskrána með síðunni.

Settu þetta allt saman og hér er það sem þú færð:

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

Hljóðspilunarlistar í WordPress

Ef þú vilt hafa lagalista styður WordPress ekki sem stendur ytri hýsingu á hverri af skjölunum þínum til að spila, en þeir bjóða það ef þú hýsir hljóðskrárnar þínar innbyrðis:

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

Það eru nokkrar lausnir þarna úti sem þú getur bætt við barnaþemað þitt sem gerir kleift að hlaða ytri hljóðskrám.

Bættu við Podcast RSS straumnum þínum á skenkurinn þinn

Með því að nota WordPress spilarann ​​skrifaði ég tappi til að sýna podcastið þitt sjálfkrafa í hliðarstikugræju. Þú getur lestu um það hér og halaðu niður viðbótinni úr WordPress geymslunni.

Sérsniðin WordPress hljóðspilarinn

Eins og þú sérð á minni eigin síðu er MP3 spilari frekar grunn í WordPress. Hins vegar, vegna þess að það er HTML5, geturðu klætt það töluvert með CSS. CSSIgniter hefur skrifað frábæra kennslu um að sérsníða hljóðspilarann svo ég mun ekki endurtaka þetta allt hér ... en hér eru möguleikarnir sem þú getur sérsniðið:

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

Auktu WordPress MP3 spilara þinn

Það eru líka nokkur greidd viðbætur til að sýna MP3 hljóðið þitt í nokkrum alveg töfrandi hljóðspilurum:

Upplýsingagjöf: Ég er að nota tengilana mína fyrir ofangreind viðbætur í gegnum CodeCanyon, frábær viðbótarsíða sem er með vel studd viðbætur og framúrskarandi þjónustu og stuðning.

Hvað finnst þér?

Þessi síða notar Akismet til að draga úr ruslpósti. Lærðu hvernig ummæli þín eru unnin.