WordPress: Enmetu MP3-Ludilon en Vian Blogan Afiŝon

Blogludilo MP3-Ludilo kun WordPress

Kun podkastado kaj muzika interŝanĝo tiel ofta interrete, estas bonega ŝanco plibonigi la sperton de viaj vizitantoj en via retejo per enigo de sono en viaj blogaj afiŝoj. Feliĉe, WordPress daŭre evoluigas sian subtenon por enigi aliajn amaskomunikilajn tipojn - kaj mp3 dosieroj estas unu el tiuj facilaj por fari!

Montrado de ludilo por lastatempa intervjuo estas bonega, gastigi la efektivan sondosieron eble ne konsilas. Plej multaj retejaj gastigantoj por WordPress-ejoj ne estas optimumigitaj por flui amaskomunikilarojn - do ne miru, se vi ekhavas iujn problemojn, kiam vi tute limigas la uzadon de larĝa bando aŭ viajn sonajn budojn. Mi rekomendus gastigi la efektivan sondosieron en aŭd-flua servo aŭ podkasta gastiganta motoro. Kaj ... estu certa, ke via gastiganto subtenas SSL (https: // vojo) ... blogo sekure gastigita ne ludos sondosieron ne sekure gastigitan aliloke.

Dirite, se vi scias la lokon de via dosiero, enigi ĝin en blogaĵon estas sufiĉe simpla. WordPress havas sian propran sonludilon HTML5 enkonstruitan rekte en ĝi, por ke vi povu uzi shortcode por montri la ludilon.

Jen ekzemplo de freŝa podkasta epizodo, kiun mi faris:

Kun la plej nova ripeto de la redaktoro Gutenberg en WordPress, mi ĵus algluis la sondosieran vojon kaj la redaktoro efektive kreis la mallongan kodon. Sekvas la efektiva mallonga kodo, kie vi anstataŭigus la src per la plena URL de la dosiero, kiun vi volas ludi.

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

WordPress subtenas mp3-tipojn, m4a, ogg, wav kaj wma. Vi povas eĉ havi mallongan kodon, kiu donas alternativon, se vi havus vizitantojn per retumiloj, kiuj ne subtenas unu aŭ alian:

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

Vi povas plibonigi la shortcode ankaŭ per aliaj ebloj:

  • buklo - opcio por bukli la sonon.
  • aŭtomata ludado - opcio por aŭtomate ludi la dosieron tuj kiam ĝi ŝarĝas.
  • preload - eblo por antaŭŝargi la sondosieron kun la paĝo.

Kunmetu ĉion kaj jen kion vi ricevas:

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

Aŭdaj Ludlistoj en WordPress

Se vi volas havi ludliston, WordPress nuntempe ne subtenas eksteran gastigadon de ĉiu el viaj ludendaj dosieroj, sed ili ofertas ĝin se vi gastigas viajn sondosierojn interne:

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

Estas iuj solvoj tie, ke vi povas aldoni al via Infana Temo, kiu ebligos ŝarĝon de ekstera sondosiero.

Aldonu Vian Podkastan RSS-Fluon Al Via Flanka Stango

Uzante la WordPress-ludilon, mi verkis aldonaĵon por montri vian podkaston aŭtomate en flanka fenestraĵo. Vi povas legu pri ĝi ĉi tie kaj elŝutu la aldonaĵon de la WordPress-deponejo.

Personigo de la WordPress-Ludilo de WordPress

Kiel vi povas vidi per mia propra retejo, la MP3-ludilo estas sufiĉe baza en WordPress. Tamen, ĉar ĝi estas HTML5, vi povas vesti ĝin sufiĉe per CSS. CSSIgniter verkis bonegan lernilon pri agordi la sonludilon do mi ne ripetos ĉion ĉi tie ... sed jen la ebloj, kiujn vi povas agordi:

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

Plibonigu Vian WordPress MP3-Ludilon

Estas ankaŭ iuj pagitaj aldonaĵoj por montri vian MP3-sonon en iuj absolute mirindaj aŭdaj ludiloj:

Malkaŝo: Mi uzas miajn filiajn ligojn por la supraj aldonaĵoj per Codecanyon, mirinda kromprograma retejo, kiu havas bone subtenatajn aldonaĵojn kaj elstaran servon kaj subtenon.

Kion vi pensas?

Ĉi tiu retejo uzas Akismeton por redukti spamon. Lernu, kiel via komento datiĝas.