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

Blogpos MP3-speler met WordPress

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 weet dat die lêer van u lêer is, is dit eenvoudig om dit in 'n blogpos in te lê. WordPress het sy eie HTML5-klankspeler wat direk daarin ingebou is, sodat u '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 weergawe van die Gutenberg-redakteur in WordPress, het ek net die klanklêerpad geplak en die redakteur het eintlik die kortkode geskep. Die werklike kortkode volg, waar u die src sou vervang deur die volledige URL van die lêer wat u 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 u dit egter nogal met CSS aantrek. CSSIgniter het 'n goeie handleiding oor geskryf 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:

Openbaarmaking: ek gebruik my geaffilieerde skakels vir bogenoemde inproppe via Codecanyon, 'n fantastiese inpropwebwerf met goed gesteunde invoegtoepassings en uitstekende diens en ondersteuning.

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.