WordPress: integreer een mp3-speler in uw blogbericht

Blogbericht MP3-speler met WordPress

Omdat podcasting en het delen van muziek zo vaak online voorkomen, is er een geweldige kans om de ervaring van uw bezoekers op uw site te verbeteren door audio in uw blogberichten in te sluiten. Gelukkig blijft WordPress zijn ondersteuning ontwikkelen voor het insluiten van andere mediatypen - en mp3 bestanden zijn er een die gemakkelijk te doen zijn!

Hoewel het geweldig is om een ​​speler weer te geven voor een recent interview, is het hosten van het daadwerkelijke audiobestand misschien niet aan te raden. De meeste webhosts voor WordPress-sites zijn niet geoptimaliseerd voor het streamen van media - dus wees niet verbaasd als u problemen tegenkomt waarbij u limieten op het bandbreedtegebruik raakt of uw audio helemaal vastloopt. Ik raad aan om het daadwerkelijke audiobestand te hosten op een audiostreamingdienst of een podcast-hosting-engine. En ... zorg ervoor dat uw host SSL ondersteunt (een https: // pad) ... een blog die veilig wordt gehost, zal geen audiobestand afspelen dat niet ergens anders veilig wordt gehost.

Dat gezegd hebbende, als u de locatie van uw bestand kent, is het inbedden in een blogbericht vrij eenvoudig. WordPress heeft een eigen HTML5-audiospeler die er rechtstreeks in is ingebouwd, zodat u een shortcode kunt gebruiken om de speler weer te geven.

Hier is een voorbeeld van een recente podcastaflevering die ik heb gedaan:

Met de laatste versie van de Gutenberg-editor in WordPress heb ik zojuist het audiobestandspad geplakt en de editor heeft de shortcode daadwerkelijk gemaakt. De eigenlijke shortcode volgt, waar u de src zou vervangen door de volledige URL van het bestand dat u wilt afspelen.

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

WordPress ondersteunt mp3-, m4a-, ogg-, wav- en wma-bestandstypen. U kunt zelfs een shortcode hebben die een terugval vormt in het geval u bezoekers heeft die browsers gebruiken die de een of de ander niet ondersteunen:

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

U kunt de shortcode ook verbeteren met andere opties:

  • loop - een optie om de audio te herhalen.
  • autoplay - een optie om het bestand automatisch af te spelen zodra het wordt geladen.
  • preload - een optie om het audiobestand vooraf met de pagina te laden.

Zet het allemaal samen en dit is wat je krijgt:

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

Audio-afspeellijsten in WordPress

Als je een afspeellijst wilt hebben, ondersteunt WordPress momenteel geen externe hosting van elk van je bestanden om af te spelen, maar ze bieden het wel als je je audiobestanden intern host:

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

Er zijn enkele oplossingen die u kunt toevoegen aan uw kindthema waarmee u externe audiobestanden kunt laden.

Voeg uw podcast RSS-feed toe aan uw zijbalk

Met behulp van de WordPress-speler heb ik een plug-in geschreven om je podcast automatisch weer te geven in een zijbalkwidget. Jij kan Lees hierover als download de plug-in uit de WordPress-repository.

Aanpassing van de WordPress-audiospeler

Zoals je op mijn eigen site kunt zien, is de mp3-speler vrij eenvoudig in WordPress. Omdat het echter HTML5 is, kun je het behoorlijk wat aankleden met CSS. CSSIgniter heeft een geweldige tutorial geschreven over de audiospeler aanpassen dus ik zal het hier niet allemaal herhalen ... maar hier zijn de opties die u kunt aanpassen:

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

Verbeter uw WordPress MP3-speler

Er zijn ook enkele betaalde plug-ins voor het weergeven van uw MP3-audio in een aantal absoluut verbluffende audiospelers:

Openbaarmaking: ik gebruik mijn aangesloten links voor de bovenstaande plug-ins via Codecanyon, een fantastische plug-insite met goed ondersteunde plug-ins en uitstekende service en ondersteuning.

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.