WordPress: Upota MP3-soitin blogiviestiin

Blogikirjoita MP3-soitin WordPressillä

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 saavutat kaistanleveyden käytön rajoituksia tai äänentoisto pysähtyy kokonaan. Suosittelen varsinaisen äänitiedoston isännöintiä äänen suoratoistopalveluun tai podcast-hosting-moottoriin. Ja ... varmista, että isäntäsi tukee SSL: ää (https: // polku) ... turvallisesti isännöity blogi ei toista äänitiedostoa, jota ei ole suojattu muualla.

Se sanoi, että tiedät tiedostosi sijainnin, upottaminen blogikirjoitukseen on melko yksinkertaista. WordPressissä on oma HTML5-audiosoitin, joka on rakennettu suoraan siihen, joten voit käyttää soittinta lyhytkoodilla.

Tässä on esimerkki viimeaikaisesta tekemästäni podcast-jaksosta:

Gutenberg-editorin viimeisimmällä iteroinnilla WordPressissä liitin juuri äänitiedostopolun ja editori tosiasiallisesti loi lyhytkoodin. Seuraavassa on varsinainen lyhytkoodi, jossa korvataan src toistettavan tiedoston täydellä URL-osoitteella.

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

WordPress tukee mp3-, m4a-, ogg-, wav- ja wma-tiedostotyyppejä. Sinulla voi olla jopa lyhytkoodi, joka tarjoaa varajärjestelmän, 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.

Kokoa 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 tiedostojesi ulkoista isännöintiä toistettavaksi, 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ä että lataa laajennus WordPress-arkistosta.

WordPress Audio Playerin mukauttaminen

Kuten omasta sivustostani näet, MP3-soitin on melko yksinkertainen WordPressissä. Koska se on HTML5, voit pukeutua siihen melko vähän CSS: n avulla. CSSIgniter on kirjoittanut upean 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:

Ilmoitus: Käytän tytäryhtiölinkkejäni yllä oleviin laajennuksiin Codecanyon, upea laajennussivusto, jolla on hyvin tuetut laajennukset ja erinomainen palvelu ja tuki.

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.