Content Marketingmarkedsførings~~POS=TRUNC

WordPress: Bygg inn en MP3-spiller i blogginnlegget ditt

Med podcasting og musikkdeling så utbredt på nettet, er det en flott mulighet til å forbedre de besøkendes opplevelse på nettstedet ditt ved å legge inn lyd i blogginnleggene dine. Heldigvis fortsetter WordPress å utvikle sin støtte for å legge inn andre medietyper - og mp3 filer er en av de som er enkle å gjøre!

Selv om det er flott å vise en spiller for et nylig intervju, er det kanskje ikke tilrådelig å hoste den faktiske lydfilen. De fleste nettverter for WordPress-nettsteder er ikke optimalisert for streaming av media - så vær ikke overrasket hvis du begynner å støte på noen problemer der du treffer grensene for bruk av båndbredde eller lydbodene dine helt. Jeg vil anbefale å være vert for den faktiske lydfilen på en lydstrømmetjeneste eller podcast-hostingmotor. Og ... vær sikker på at verten din støtter SSL (en https: // sti) ... en blogg som er vert sikkert, vil ikke spille av en lydfil som ikke er vert sikkert andre steder.

Når det er sagt, hvis du vet plasseringen til filen din, er det ganske enkelt å bygge den inn i et blogginnlegg. WordPress har sin egen HTML5-lydspiller innebygd direkte i den slik at du kan bruke en kortkode for å vise spilleren.

Her er et eksempel fra en nylig podcast-episode jeg gjorde:

Med den siste iterasjonen av Gutenberg-editoren i WordPress, limte jeg bare inn lydfilbanen og redaktøren opprettet faktisk kortkoden. Den faktiske kortkoden følger, hvor du vil erstatte src med den fullstendige URL-en til filen du vil spille av.

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

WordPress støtter filtyper for mp3, m4a, ogg, wav og wma. Du kan til og med ha en kortkode som gir en reserve i tilfelle du har besøkende ved hjelp av nettlesere som ikke støtter den ene eller den andre:

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

Du kan også forbedre kortkoden med andre alternativer:

  • loop - et alternativ for looping av lyden.
  • autoplay - et alternativ for automatisk å spille av filen så snart den lastes inn.
  • forhåndslast - et alternativ for å forhåndslaste lydfilen med siden.

Sett alt sammen, og her er hva du får:

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

Audio spillelister i WordPress

Hvis du vil ha en spilleliste, støtter ikke WordPress for øyeblikket ekstern hosting av hver av filene dine som skal spilles av, men de tilbyr den hvis du er vert for lydfilene dine internt:

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

Det finnes noen løsninger der ute som du kan legge til barnetemaet ditt som vil muliggjøre lasting av ekstern lydfil.

Legg til din podcast RSS-feed i sidefeltet

Ved hjelp av WordPress-spilleren skrev jeg et plugin for å vise podcasten automatisk i en sidepanel-widget. Du kan les om det her og last ned plugin fra WordPress-depotet.

Tilpasning av WordPress Audio Player

Som du kan se fra min egen side, er MP3-spilleren ganske grunnleggende i WordPress. Men fordi det er HTML5, kan du kle den opp ganske mye ved å bruke CSS. CSSIgniter har skrevet en flott opplæring om tilpasse lydavspilleren så jeg vil ikke gjenta alt her ... men her er alternativene du kan tilpasse:

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

Forbedre WordPress MP3-spilleren din

Det er også noen betalte plugins for å vise MP3-lyden din i noen helt fantastiske lydspillere:

Avsløring: Martech Zone bruker tilknyttede lenker for pluginene ovenfor, inkludert Codecanyon, et fantastisk plugin-nettsted som har godt støttede plugins og enestående service og support.

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.