WordPress: MP3-lejátszó beágyazása a blogbejegyzésbe

Blogbejegyzés MP3 lejátszó a WordPress segítségével

Az interneten oly elterjedt podcasting és zenemegosztás révén nagyszerű lehetőség nyílik arra, hogy javítsa látogatói élményét a webhelyén, hangot ágyazva a blogbejegyzéseibe. Szerencsére a WordPress tovább fejleszti más médiatípusok - és mp3 a fájlok egyike azoknak, amelyeket egyszerűen meg lehet csinálni!

Bár a lejátszó megjelenítése egy nemrégiben készült interjúnak nagyszerű, előfordulhat, hogy a tényleges hangfájl tárolása nem tanácsos. A WordPress-webhelyek legtöbb webtárhelye nincs optimalizálva a média streamingjéhez - ezért ne lepődjön meg, ha olyan problémákba kezd, amelyekben sávszélesség-használatra vonatkozó korlátozásokat üt el, vagy az audio-stádiumok teljes egészében fennállnak. Azt javaslom, hogy a tényleges audio fájlt egy audio streaming szolgáltatáson vagy podcast hosting motoron tárolja. És ... győződjön meg róla, hogy a gazdagép támogatja az SSL-t (egy https: // elérési út) ... egy biztonságosan tárolt blog nem fog lejátszani olyan hangfájlt, amelyet máshol nem biztonságos.

Ez azt jelenti, hogy tudja a fájl helyét, beágyazása egy blogbejegyzésbe meglehetősen egyszerű. A WordPress saját HTML5 audiolejátszóval rendelkezik, amely közvetlenül bele van építve, így rövid kód használatával megjelenítheti a lejátszót.

Íme egy példa egy nemrégiben készített podcast-epizódból:

A WordPress Gutenberg szerkesztőjének legújabb iterációjával csak beillesztettem az audio fájl elérési útját, és a szerkesztő valóban létrehozta a rövid kódot. A tényleges rövid kód következik, ahol az src-t a lejátszani kívánt fájl teljes URL-jével cserélné le.

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

A WordPress támogatja az mp3, m4a, ogg, wav és wma fájltípusokat. Akár egy rövid kódot is, amely tartalékot nyújt abban az esetben, ha látogatói vannak olyan böngészőkkel, amelyek nem támogatják egyiket vagy másikat:

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

A rövid kódot más lehetőségekkel is javíthatja:

  • hurok - az audio hurokba kapcsolásának lehetősége.
  • autoplay - lehetőség a fájl automatikus lejátszására, amint betöltődik.
  • preload - egy lehetőség az audiofájl előzetes betöltésére az oldallal.

Tedd össze az egészet, és ezt kapod:

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

Audio lejátszási listák a WordPress-ben

Ha lejátszási listát szeretne, a WordPress jelenleg nem támogatja az összes lejátszandó fájl külső tárhelyét, de mégis felajánlja, ha az audiofájlokat belsőleg tárolja:

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

Vannak néhány megoldás odakinn hozzáadhatja a Gyermek témához, amely lehetővé teszi a külső hangfájlok betöltését.

Adja hozzá Podcast RSS-hírcsatornáját az oldalsávhoz

A WordPress lejátszó segítségével írtam egy bővítményt, hogy a podcast automatikusan megjelenjen egy oldalsáv widgetben. tudsz itt olvashat róla és töltse le a bővítményt a WordPress adattárból.

A WordPress Audio Player testreszabása

Ahogy a saját webhelyemen is láthatja, az MP3-lejátszó elég alap a WordPress-ben. Mivel azonban ez HTML5, a CSS használatával meglehetősen sokat öltözhet. A CSSIgniter remek oktatóanyagot írt az audio lejátszó testreszabása szóval itt nem fogom megismételni az egészet ... de itt vannak a testreszabható lehetőségek:

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

Fokozza a WordPress MP3-lejátszót

Van néhány fizetős plugin is az MP3 audio megjelenítéséhez néhány teljesen lenyűgöző audio lejátszóban:

Nyilvánosságra hozatal: A fenti bővítményekhez kapcsolt linkjeimet használom Codecanyon, egy fantasztikus bővítmény webhely, amely jól támogatott bővítményekkel, valamint kiemelkedő szolgáltatással és támogatással rendelkezik.

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.