WordPress: Sluit 'n MP3-speler in in u blogpos

Douglas Karr Maandag, Januarie 11, 2021

0 2,234 3 minute lees

Met podcasting en musiekdeling so algemeen aanlyn, is daar 'n wonderlike geleentheid om u besoekers se ervaring op u webwerf te verbeter deur klank in u blogposte in te sluit. Gelukkig is WordPress steeds besig om sy ondersteuning vir die inbedding van ander mediasoorte - en - te ontwikkel mp3 lêers is een van die maklikste om te doen!

Alhoewel dit goed is om 'n speler vir 'n onlangse onderhoud te vertoon, is dit nie raadsaam om die klanklêer aan te bied nie. Die meeste webgashere vir WordPress-webwerwe is nie geoptimaliseer vir streaming media nie. Wees dus nie verbaas as u probleme ondervind waar u die bandbreedtegebruik of u klankstalletjies beperk nie. Ek beveel aan om die werklike klanklêer aan te bied op 'n klankstroomdiens of podcast-hosting-enjin. En ... wees seker dat u gasheer SSL ondersteun ('n https: // pad) ... 'n blog wat veilig aangebied word, sal nie 'n klanklêer speel wat nie elders veilig aangebied word nie.

Dit gesê, as u die ligging van u lêer ken, is dit redelik eenvoudig om dit in 'n blogpos in te sluit. WordPress het sy eie HTML5-klankspeler direk daarin ingebou sodat jy 'n kortkode kan gebruik om die speler te vertoon.

Hier is 'n voorbeeld van 'n onlangse podcast-episode wat ek gedoen het:

Met die nuutste herhaling van die Gutenberg-redigeerder in WordPress, het ek net die klanklêerpad geplak en die redigeerder het eintlik die kortkode geskep. Die werklike kortkode volg, waar jy die src sal vervang met die volledige URL van die lêer wat jy wil speel.

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

WordPress ondersteun filetipes van mp3, m4a, ogg, wav en wma. U kan selfs 'n kortkode hê wat 'n terugval bied as u besoekers gebruik met blaaiers wat nie die een of die ander ondersteun nie:

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

U kan die kortkode ook verbeter met ander opsies:

lus - 'n opsie om die klank te lus.
outospeel - 'n opsie om die lêer outomaties te speel sodra dit laai.
voorlaai - 'n opsie om die klanklêer vooraf op die bladsy te laai.

Sit alles bymekaar en hier is wat u kry:

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

Klanksnitlyste in WordPress

As u 'n snitlys wil hê, ondersteun WordPress tans nie eksterne hosting van elkeen van u lêers om te speel nie, maar dit word aangebied as u u klanklêers intern aanbied:

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

Daar is 'n paar oplossings daar buite wat u by u Kindtema kan voeg om eksterne klanklêers te laai.

Voeg u podcast-RSS-voer by u sybalk

Met behulp van die WordPress-speler het ek 'n invoegtoepassing geskryf om u podcast outomaties in 'n sidebar-widget te vertoon. Jy kan lees hieroor en laai die inprop af vanaf die WordPress-bewaarplek.

Aanpassing van die WordPress Audio Player

Soos u op my eie webwerf kan sien, is die MP3-speler redelik basies in WordPress. Omdat dit HTML5 is, kan jy dit egter nogal aantrek deur gebruik te maak CSS. CSSIgniter het 'n wonderlike tutoriaal geskryf oor die aanpassing van die klankspeler so ek sal dit nie alles hier herhaal nie ... maar hier is die opsies wat u kan aanpas:

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

Verbeter u WordPress MP3-speler

Daar is ook 'n paar betaalde invoegtoepassings om u MP3-klank in sommige ongelooflike klankspelers te vertoon:

Sonaar Podcast Player vir WordPress

Openbaarmaking: Martech Zone gebruik geaffilieerde skakels vir bogenoemde inproppe, insluitend Codecanyon, 'n fantastiese inpropwebwerf met goed gesteunde invoegtoepassings en uitstekende diens en ondersteuning.