WordPress: In MP3-spiel ynbêde yn jo blogpost

Blogberjocht MP3 Spiler mei WordPress

Mei podcasting en dielen fan muzyk sa online, is d'r in geweldige kâns om de ûnderfining fan jo besikers op jo side te ferbetterjen troch audio yn te bouwen yn jo blogberjochten. Gelokkich bliuwt WordPress har stipe foar it ynbêdzjen fan oare mediatypes - en mp3 bestannen binne ien fan dyjingen dy't maklik te dwaan binne!

Hoewol it werjaan fan in spiler foar in resint ynterview is geweldig, is it hostjen fan it eigentlike audiobestân miskien net oan te rieden. De measte webhosters foar WordPress-siden binne net optimalisearre foar streamende media - dus wês net ferrast as jo begjinne mei guon problemen wêr't jo limiten hawwe op it gebrûk fan bandbreedte of jo audio-stallen hielendal. Ik soe oanbefelje dat jo it eigentlike audiobestân hostje op in audio-streaming-tsjinst as podcast-hostingmotor. En ... wês der wis fan dat jo host SSL stipet (in https: // paad) ... in blog dat befeilige is sil gjin audiobestân spielje dat earne oars net feilich is.

Dat sei, as jo de lokaasje fan jo bestân kenne, is it ynbêdzjen yn in blogpost frij simpel. WordPress hat in eigen HTML5-audiospiler direkt ynboud, sadat jo in koarte koade kinne brûke om de spiler wer te jaan.

Hjir is in foarbyld út in resinte podcast-ôflevering dy't ik die:

Mei de lêste iteraasje fan 'e Gutenberg-bewurker yn WordPress, haw ik it paad foar audiobestannen gewoan plakt en de bewurker makke de koarte koade eins oan. De eigentlike koarte koade folget, wêr't jo de src ferfange troch de folsleine URL fan it bestân dat jo wolle spielje.

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

WordPress stipet filetypen mp3, m4a, ogg, wav, en wma. Jo kinne sels in koarte koade hawwe dy't in fallback biedt as jo besikers hawwe mei browsers dy't de ien of de oare net stypje:

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

Jo kinne de koarte koade ek ferbetterje mei oare opsjes:

  • loop - in opsje foar looping fan 'e audio.
  • autoplay - in opsje om it bestân automatysk te spyljen sa gau as it wurdt laden.
  • foarlade - in opsje om it audiobestân foar te laden mei de side.

Set it allegear byinoar en hjir is wat jo krije:

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

Audio Playlists yn WordPress

As jo ​​in spyllist wolle hawwe, stipet WordPress op it stuit gjin eksterne hosting fan elk fan jo te spyljen bestannen, mar se biede it wol oan as jo jo audiobestannen yntern hostje:

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

Der binne guon oplossings derút dat jo kinne tafoegje oan jo Child Theme dat it laden fan audio-bestannen ynskeakelje sil.

Foegje jo podcast RSS-feed ta oan jo sydbalke

Mei de WordPress-spiler skreau ik in plugin om jo podcast automatysk wer te jaan yn in sidebar-widget. Do kinst lês it hjiroer en download de plugin fanút it WordPress repository.

Oanpassing fan 'e WordPress Audio Player

Sa't jo sjen kinne op myn eigen side, is de MP3-spiler frij basis yn WordPress. Om't it HTML5 is, kinne jo it lykwols nochal wat oanklaaie mei CSS. CSSIgniter hat in geweldige tutorial skreaun de audiospiler oanpasse dat ik sil it hjir allegear net werhelje ... mar hjir binne de opsjes dy't jo kinne oanpasse:

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

Ferbetterje jo WordPress MP3-spiler

D'r binne ek wat betelle plugins foar it werjaan fan jo MP3-audio yn guon absolút prachtige audio-spilers:

Bekendmakking: ik brûk myn affiliate links foar de boppesteande plugins fia Codecanyon, in fantastyske pluginsite dy't goed stipe plugins en enestaende service en stipe hat.

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.