WordPress: Upota MP3-soitin blogiviestiin
Podcastingin ja musiikin jakamisen kanssa, joka on niin yleistä verkossa, on loistava tilaisuus parantaa kävijöiden kokemusta sivustollasi upottamalla ääntä blogiviesteihisi. Onneksi WordPress kehittää edelleen tukeaan muiden mediatyyppien - ja mp3 tiedostot ovat yksi niistä, jotka on helppo tehdä!
Vaikka soittimen näyttäminen äskettäisessä haastattelussa on hienoa, varsinaisen äänitiedoston isännöinti ei ehkä ole suositeltavaa. Suurinta osaa WordPress-sivustojen web-isäntiä ei ole optimoitu median suoratoistoon - joten älä hämmästy, jos alat törmätä joihinkin ongelmiin, joissa kaistanleveyden käyttöä koskevat rajoitukset tai äänen pysähtyminen kokonaan. Suosittelen varsinaisen äänitiedoston isännöintiä suoratoistopalveluun tai podcast-isäntäkoneeseen. Ja ... varmista, että isäntäsi tukee SSL: ää (https: // polku) ... turvallisesti isännöity blogi ei toista äänitiedostoa, jota ei ole suojattu muualla.
Jos tiedät tiedostosi sijainnin, sen upottaminen blogitekstiin on melko yksinkertaista. WordPressissä on oma HTML5-äänisoitin suoraan sisäänrakennettuna, joten voit käyttää lyhytkoodia soittimen näyttämiseen.
Tässä on esimerkki viimeaikaisesta tekemästäni podcast-jaksosta:
WordPressin Gutenberg-editorin uusimmalla iteraatiolla liitin juuri äänitiedoston polun ja editori itse asiassa loi lyhytkoodin. Varsinainen lyhytkoodi seuraa, jossa korvaat src:n sen tiedoston täydellisellä URL-osoitteella, jonka haluat toistaa.
[audio src="audio-source.mp3"]
WordPress tukee mp3-, m4a-, ogg-, wav- ja wma-tiedostotyyppejä. Sinulla voi olla jopa lyhytkoodi, joka tarjoaa varavarauksen, jos vierailijasi käyttävät selaimia, jotka eivät tue yhtä tai toista:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]
Voit parantaa lyhytkoodia myös muilla vaihtoehdoilla:
- silmukka - vaihtoehto äänen silmukoimiseksi.
- automaattinen toisto - mahdollisuus toistaa tiedosto automaattisesti heti, kun se latautuu.
- esilataus - mahdollisuus ladata äänitiedosto sivulle.
Laita kaikki yhteen ja saat tämän:
[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]
Audio-soittolistat WordPressissä
Jos haluat soittolistan, WordPress ei tällä hetkellä tue kaikkien toistettavien tiedostojesi ulkoista isännöintiä, mutta ne tarjoavat sen, jos isännöit äänitiedostojasi sisäisesti:
[playlist ids="123,456,789"]
On joitain ratkaisuja siellä, jonka voit lisätä lapsiteemallesi, mikä mahdollistaa ulkoisen äänitiedoston lataamisen.
Lisää Podcast RSS -syötteesi sivupalkkiin
Kirjoitin WordPress-soittimen avulla laajennuksen näyttämään podcastisi automaattisesti sivupalkin widgetissä. Sinä pystyt Lue siitä täältä ja lataa laajennus WordPress-arkistosta.
WordPress Audio Playerin mukauttaminen
Kuten omalta sivustoltani näet, MP3-soitin on melko perus WordPressissä. Kuitenkin, koska se on HTML5, voit pukea sitä melko paljon käyttämällä CSS. CSSIgniter on kirjoittanut loistavan opetusohjelman audiosoittimen mukauttaminen joten en toista kaikkea täällä ... mutta tässä on vaihtoehtoja, joita voit muokata:
/* 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;
}
Paranna WordPress-MP3-soitinta
On myös joitain maksettuja laajennuksia MP3-äänen näyttämiseen joissakin aivan upeissa soittimissa:
- MP3-Sticky Player WordPress -laajennus
- Royal Audio Player WordPress-laajennus
- HTML5-äänisoittimet WordPress Plugins Bundle
- Easy Audio Player WordPress -laajennus
- Sonaar Podcast Player WordPressille
Disclosure: Martech Zone käyttää affiliate-linkkejä yllä oleville laajennuksille, mukaan lukien Codecanyon, upea laajennussivusto, jolla on hyvin tuetut laajennukset ja erinomainen palvelu ja tuki.