Konten Pemasaranmarketing Tools

WordPress: Sematkan MP3 Player di Entri Blog Anda

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 heran jika Anda mulai mengalami beberapa masalah di mana Anda mencapai batas penggunaan bandwidth atau audio Anda macet 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 di 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 pendeknya. Kode pendek 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 dan unduh plugin dari repositori WordPress.

Kustomisasi Pemutar Audio WordPress

Seperti yang Anda lihat dari situs saya sendiri, pemutar MP3 cukup mendasar di WordPress. Namun, karena ini adalah HTML5, Anda dapat mendandaninya dengan menggunakan CSS. CSSIgniter telah menulis tutorial yang bagus 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: Martech Zone menggunakan tautan afiliasi untuk plugin di atas termasuk Codecanyon, situs plugin fantastis yang memiliki plugin yang didukung dengan baik serta layanan dan dukungan luar biasa.

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.