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

Blogindlæg MP3-afspiller med WordPress

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 webværter til WordPress-sider 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 hostes sikkert, kan ikke afspille 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 integrere det 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, har jeg lige indsat lydfilstien, og editoren oprettede faktisk kortkoden. Den aktuelle kortkode følger, hvor du ville erstatte src med den fulde URL til den fil, du vil have spillet.

[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 hoster 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 og Hent pluginet fra WordPress-arkivet.

Tilpasning af WordPress Audio Player

Som du kan se på mit eget sted, er MP3-afspilleren ret grundlæggende i WordPress. Men fordi det er HTML5, kan du pynte det ganske lidt ved hjælp af CSS. CSSIgniter har skrevet en god 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:

Offentliggørelse: Jeg bruger mine tilknyttede links til ovenstående plugins via Codecanyon, et fantastisk pluginsite, der har godt understøttede plugins og fremragende service og support.

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.