WordPress: Sematkan MP3 Player di Entri Blog Anda

Posting Blog MP3 Player dengan WordPress

Dengan podcasting dan berbagi musik yang begitu lazim secara online, ada peluang besar untuk meningkatkan pengalaman pengunjung Anda di situs Anda dengan menyematkan audio dalam posting blog Anda. Untungnya, WordPress terus mengembangkan dukungannya untuk menyematkan jenis media lain - dan mp3 file adalah salah satu yang mudah dilakukan!

Meskipun menampilkan pemain untuk wawancara baru-baru ini bagus, menyimpan file audio yang sebenarnya mungkin tidak disarankan. Sebagian besar host web untuk situs WordPress tidak dioptimalkan untuk media streaming - jadi jangan kaget jika Anda mulai mengalami beberapa masalah di mana Anda mencapai batas penggunaan bandwidth atau audio Anda terhenti sama sekali. Saya akan merekomendasikan hosting file audio yang sebenarnya pada layanan streaming audio atau mesin hosting podcast. Dan… pastikan bahwa host Anda mendukung SSL (sebuah https: // path)… blog yang dihosting dengan aman tidak akan memutar file audio yang tidak dihosting dengan aman di tempat lain.

Meskipun demikian, jika Anda mengetahui lokasi file Anda, menyematkannya dalam postingan blog cukup sederhana. WordPress memiliki pemutar audio HTML5 sendiri yang terpasang langsung di dalamnya sehingga Anda dapat menggunakan kode pendek untuk menampilkan pemutar.

Inilah contoh dari episode podcast baru-baru ini yang saya lakukan:

Dengan iterasi terbaru dari editor Gutenberg di WordPress, saya baru saja menempelkan jalur file audio dan editor benar-benar membuat kode pendek. Kode singkat yang sebenarnya mengikuti, di mana Anda akan mengganti src dengan URL lengkap dari file yang ingin Anda mainkan.

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

WordPress mendukung jenis file mp3, m4a, ogg, wav, dan wma. Anda bahkan dapat memiliki kode pendek yang memberikan penggantian jika Anda memiliki pengunjung yang menggunakan browser yang tidak mendukung salah satu atau lainnya:

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

Anda juga dapat meningkatkan kode pendek dengan opsi lain:

  • loop - opsi untuk mengulang audio.
  • autoplay - opsi untuk memutar file secara otomatis segera setelah dimuat.
  • preload - opsi untuk memuat file audio dengan halaman.

Gabungkan semuanya dan inilah yang Anda dapatkan:

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

Daftar Putar Audio di WordPress

Jika Anda ingin memiliki playlist, WordPress saat ini tidak mendukung hosting eksternal dari setiap file Anda untuk diputar, tetapi mereka menawarkannya jika Anda menghosting file audio Anda secara internal:

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

Ada beberapa solusi di luar sana yang dapat Anda tambahkan ke Tema Anak Anda yang akan memungkinkan pemuatan file audio eksternal.

Tambahkan Umpan RSS Podcast Anda ke Sidebar Anda

Menggunakan pemutar WordPress, saya menulis plugin untuk menampilkan podcast Anda secara otomatis di widget bilah sisi. Kamu bisa Baca di sini serta unduh plugin dari repositori WordPress.

Kustomisasi Pemutar Audio WordPress

Seperti yang Anda lihat di situs saya sendiri, pemutar MP3 cukup mendasar di WordPress. Namun, karena ini HTML5, Anda bisa sedikit mendandani dengan menggunakan CSS. CSSIgniter telah menulis tutorial yang bagus tentang menyesuaikan pemutar audio jadi saya tidak akan mengulangi semuanya di sini… tetapi berikut adalah opsi yang dapat Anda sesuaikan:

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

Tingkatkan MP3 Player WordPress Anda

Ada juga beberapa plugin berbayar untuk menampilkan audio MP3 Anda di beberapa pemutar audio yang benar-benar menakjubkan:

Pengungkapan: Saya menggunakan tautan afiliasi saya untuk plugin di atas melalui Codecanyon, situs plugin fantastis yang memiliki plugin yang didukung dengan baik serta layanan dan dukungan luar biasa.

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.