WordPress: Lebokake Pamuter MP3 ing Kirim Blog Sampeyan

Blog Post MP3 Player nganggo WordPress

Kanthi podcasting lan enggo bareng musik dadi kondhang online, ana kesempatan sing apik kanggo nambah pengalaman pengunjung ing situs kanthi masang audio ing kiriman blog. Kanthi matur nuwun sanget, WordPress terus ngembangake dhukungan kanggo masang jinis media liyane - lan mp3 file minangka salah sawijining sing gampang ditindakake!

Nalika nampilake pamuter kanggo wawancara anyar, hosting file audio sing asli bisa uga ora disaranake. Umume host web kanggo situs WordPress ora dioptimalake kanggo streaming media - mula aja kaget yen sampeyan wiwit nemoni sawetara masalah sing nyebabake watesan panggunaan bandwidth utawa kios audio sampeyan kabeh. Aku nyaranake hosting file audio nyata ing layanan streaming audio utawa mesin hosting podcast. Lan… priksa manawa host sampeyan ndhukung SSL (https: // path)… blog sing di-host kanthi aman ora bakal muter file audio sing ora di-host kanthi aman ing panggenan liya.

Yen jarene, sampeyan ngerti dununge file sampeyan, nyisipake ing postingan blog cukup sederhana. WordPress duwe pamuter audio HTML5 dhewe sing dibangun langsung dadi sampeyan bisa nggunakake shortcode kanggo nampilake pamuter.

Mangkene conto saka episode podcast anyar sing aku lakoni:

Kanthi pengulangan editor Gutenberg paling anyar ing WordPress, aku mung nempelake jalur file audio lan editor nyatane nggawe shortcode. Shortcode nyata ing ngisor iki, ing endi sampeyan bakal ngganti src kanthi URL lengkap file sing pengin diputer.

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

WordPress ndhukung filetipe mp3, m4a, ogg, wav, lan wma. Sampeyan bisa uga duwe kode shortcode sing menehi fallback yen sampeyan duwe pengunjung nggunakake browser sing ora ndhukung siji utawa liyane:

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

Sampeyan bisa nambah kode shortcode uga nganggo opsi liyane:

  • loop - pilihan kanggo muter audio.
  • autoplay - pilihan kanggo muter file kanthi otomatis yen akeh.
  • preload - pilihan kanggo preload file audio karo kaca kasebut.

Wenehake kabeh lan iki sing sampeyan entuk:

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

Dhaptar Dhaptar Audio ing WordPress

Yen sampeyan pengin duwe dhaptar lagu, WordPress saiki ora ndhukung hosting eksternal saben file kanggo diputer, nanging nawakake yen sampeyan hosting file audio kanthi internal:

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

ana sawetara solusi ing kana sampeyan bisa nambah menyang Tema Anak sing bakal ngaktifake muatan file audio eksternal.

Tambah Podcast RSS Feed menyang Sidebar

Nggunakake pamuter WordPress, aku nulis plugin kanggo nampilake podcast kanthi otomatis ing widget sidebar. Sampeyan bisa wacanen ing kene lan download plugin saka repositori WordPress.

Kustomisasi Pamuter Audio WordPress

Kaya sing sampeyan ngerteni saka situsku dhewe, pamuter MP3 pancen dhasar ing WordPress. Nanging, amarga HTML5, sampeyan bisa nganggo cukup nganggo CSS. CSSIgniter wis nulis tutorial sing apik babagan ngatur pamuter audio dadi aku ora bakal mbaleni kabeh ing kene… nanging iki pilihan sing bisa disesuaikan:

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

Ningkatake Pamuter MP3 WordPress Sampeyan

Uga ana sawetara plugin mbayar kanggo nampilake audio MP3 ing sawetara pemain audio sing apik tenan:

Pengungkapan: Aku nggunakake link afiliasi kanggo plugin ing ndhuwur liwat Codecanyon, situs plugin sing apik banget sing duwe plugin sing didhukung kanthi apik lan layanan lan dhukungan sing luar biasa.

Apa sampeyan mikir?

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.