WordPress: Gwreiddio Chwaraewr MP3 yn Eich Post Blog

Blog Post Chwaraewr MP3 gyda WordPress

Gyda phodledu a rhannu cerddoriaeth mor gyffredin ar-lein, mae cyfle gwych i wella profiad eich ymwelwyr ar eich gwefan trwy ymgorffori sain yn eich postiadau blog. Diolch byth, mae WordPress yn parhau i esblygu ei gefnogaeth i ymgorffori mathau eraill o gyfryngau - a mp3 ffeiliau yw un o'r rhai sy'n hawdd eu gwneud!

Er bod arddangos chwaraewr ar gyfer cyfweliad diweddar yn wych, efallai na fyddai'n syniad da cynnal y ffeil sain wirioneddol. Nid yw'r mwyafrif o westeiwyr gwe ar gyfer gwefannau WordPress wedi'u optimeiddio ar gyfer cyfryngau ffrydio - felly peidiwch â synnu os byddwch chi'n dechrau rhedeg i mewn i rai materion lle rydych chi'n cyrraedd cyfyngiadau ar ddefnydd lled band neu'ch stondinau sain yn gyfan gwbl. Byddwn yn argymell cynnal y ffeil sain wirioneddol ar wasanaeth ffrydio sain neu beiriant cynnal podlediad. A… gwnewch yn siŵr bod eich gwesteiwr yn cefnogi SSL (llwybr https: //) ... ni fydd blog sy'n cael ei gynnal yn ddiogel yn chwarae ffeil sain nad yw'n cael ei chynnal yn ddiogel mewn man arall.

Wedi dweud hynny, os ydych chi'n gwybod lleoliad eich ffeil, mae ei ymgorffori mewn post blog yn eithaf syml. Mae gan WordPress ei chwaraewr sain HTML5 ei hun wedi'i ymgorffori'n uniongyrchol ynddo fel y gallwch ddefnyddio cod byr i arddangos y chwaraewr.

Dyma enghraifft o bennod podlediad ddiweddar wnes i:

Gyda'r iteriad diweddaraf o olygydd Gutenberg yn WordPress, rydw i newydd basio'r llwybr ffeiliau sain ac mewn gwirionedd creodd y golygydd y cod byr. Mae'r cod byr gwirioneddol yn dilyn, lle byddech chi'n disodli'r src gydag URL llawn y ffeil rydych chi am ei chwarae.

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

Mae WordPress yn cefnogi ffeiliau ffeiliau mp3, m4a, ogg, wav, a wma. Gallwch hyd yn oed gael cod byr sy'n darparu cwymp wrth gefn os oes gennych ymwelwyr yn defnyddio porwyr nad ydynt yn cefnogi un neu'r llall:

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

Gallwch wella'r cod byr yn ogystal ag opsiynau eraill:

  • dolen - opsiwn ar gyfer dolennu'r sain.
  • autoplay - opsiwn ar gyfer chwarae'r ffeil yn awtomatig cyn gynted ag y bydd yn llwytho.
  • preload - opsiwn i rag-lwytho'r ffeil sain gyda'r dudalen.

Rhowch y cyfan at ei gilydd a dyma beth rydych chi'n ei gael:

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

Rhestrau Chwarae Sain yn WordPress

Os ydych chi am gael rhestr chwarae, nid yw WordPress ar hyn o bryd yn cefnogi cynnal allanol pob un o'ch ffeiliau i chwarae, ond maen nhw'n ei gynnig os ydych chi'n cynnal eich ffeiliau sain yn fewnol:

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

Mae yna rhai atebion allan yna y gallwch ei ychwanegu at eich Thema Plentyn a fydd yn galluogi llwytho ffeiliau sain yn allanol.

Ychwanegwch Eich Podlediad RSS Feed i'ch Bar Ochr

Gan ddefnyddio'r chwaraewr WordPress, ysgrifennais ategyn i arddangos eich podlediad yn awtomatig mewn teclyn bar ochr. Gallwch chi Darllenwch am y peth yma a dadlwythwch yr ategyn o'r ystorfa WordPress.

Addasu'r Chwaraewr Sain WordPress

Fel y gallwch weld yn ôl fy safle fy hun, mae'r chwaraewr MP3 yn eithaf sylfaenol yn WordPress. Fodd bynnag, oherwydd ei fod yn HTML5, gallwch ei wisgo i fyny cryn dipyn gan ddefnyddio CSS. Mae CSSIgniter wedi ysgrifennu tiwtorial gwych ar addasu'r chwaraewr sain felly ni fyddaf yn ailadrodd y cyfan yma ... ond dyma'r opsiynau y gallwch eu haddasu:

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

Gwella Eich Chwaraewr MP3 WordPress

Mae yna hefyd rai ategion taledig ar gyfer arddangos eich sain MP3 mewn rhai chwaraewyr sain hollol syfrdanol:

Datgeliad: Rwy'n defnyddio fy nghysylltiadau cyswllt ar gyfer yr ategion uchod trwy Codecanyon, safle ategyn gwych sydd ag ategion â chefnogaeth dda a gwasanaeth a chefnogaeth ragorol.

Beth ydych chi'n feddwl?

Mae'r wefan hon yn defnyddio Akismet i leihau sbam. Dysgwch sut mae eich data sylwadau yn cael ei brosesu.