Content MarketingMarketing værktøjer

WordPress: Integrer en MP3-afspiller i dit blogindlæg

Med podcasting og musikdeling så udbredt online er der en fantastisk mulighed for at forbedre dine besøgendes oplevelse på dit websted ved at integrere lyd i dine blogindlæg. Heldigvis fortsætter WordPress med at udvikle sin understøttelse af indlejring af andre medietyper - og mp3 filer er en af ​​dem, der er nemme at lave!

Selvom det er fantastisk at vise en spiller til et nylig interview, er det måske ikke tilrådeligt at hoste den faktiske lydfil. De fleste webhosts til WordPress-websteder er ikke optimeret til streaming af medier - så vær ikke overrasket, hvis du begynder at løbe ind i nogle problemer, hvor du rammer grænserne for brug af båndbredde eller dine lydboder helt. Jeg vil anbefale at være vært for den faktiske lydfil på en lydstreamingtjeneste eller podcast-hostingmotor. Og ... sørg for, at din vært understøtter SSL (en https: // sti) ... en blog, der er sikkert hostet, afspiller ikke en lydfil, der ikke hostes sikkert andre steder.

Når det er sagt, hvis du kender placeringen af ​​din fil, er det ret simpelt at indlejre den i et blogindlæg. WordPress har sin egen HTML5-lydafspiller indbygget direkte i den, så du kan bruge en kortkode til at vise afspilleren.

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

Med den seneste iteration af Gutenberg-editoren i WordPress indsatte jeg lige lydfilstien, og editoren oprettede faktisk kortkoden. Den faktiske kortkode følger, hvor du ville erstatte src'en med den fulde URL på den fil, du ønsker at blive afspillet.

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

WordPress understøtter filtyperne mp3, m4a, ogg, wav og wma. Du kan endda have en kortkode, der giver et tilbagefald, hvis du har besøgende ved hjælp af browsere, der ikke understøtter den ene eller den anden:

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

Du kan også forbedre kortkoden med andre muligheder:

  • loop - en mulighed for looping af lyden.
  • autoplay - en mulighed for automatisk afspilning af filen, så snart den indlæses.
  • preload - en mulighed for at forudindlæse lydfilen med siden.

Sæt det hele sammen, og her er hvad du får:

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

Lydafspilningslister i WordPress

Hvis du vil have en playliste, understøtter WordPress i øjeblikket ikke ekstern hosting af hver af dine filer, der skal afspilles, men de tilbyder det, hvis du er vært for dine lydfiler internt:

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

Der er nogle løsninger derude, som du kan tilføje til dit barnetema, der muliggør indlæsning af ekstern lydfil.

Tilføj din podcast RSS-feed til dit sidebjælke

Ved hjælp af WordPress-afspilleren skrev jeg et plugin til automatisk at vise din podcast i en sidebar-widget. Du kan Læs om det her , Hent pluginet fra WordPress-arkivet.

Tilpasning af WordPress Audio Player

Som du kan se fra min egen side, er MP3-afspilleren ret grundlæggende i WordPress. Men fordi det er HTML5, kan du pynte det en del ved at bruge CSS. CSSIgniter har skrevet en fantastisk tutorial om tilpasning af lydafspilleren så jeg gentager ikke det hele her ... men her er de muligheder, 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 din WordPress MP3-afspiller

Der er også nogle betalte plugins til visning af din MP3-lyd i nogle helt fantastiske lydafspillere:

Afsløring: Martech Zone bruger affilierede links til ovenstående plugins, inklusive Codecanyon, et fantastisk pluginsite, der har godt understøttede plugins og fremragende service og support.

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.