Menu Tutup

Player Radio Streaming HTML5 di Website

Dengan perkembangan teknologi HTML5 dan browser yang semakin maju, kini kita dapat memasang memasang player radio streaming HTML5 di website. Pada awalnya player ini ditujukan untuk pemutar file audio. Namun seiring perkembangan, sekarang bisa digunakan sebagai player radio streaming.

Kedua jenis server yang paling banyak digunakan yaitu SHOUTcast dan Icecast, bisa memakai player ini. Era flash player perlahan mulai ditinggalkan. Bahkan google chrome secara terang-terangan memblokir flash player secara default. Jadi biar kekinian dan radio streaming dapat diakses pendengar langsung dari web, pengelola website radio streaming wajib mengganti playernya menjadi HTML5 player.

Berikut adalah contoh player radio streaming HTML5 native. Coba mainkan dengan klik tombol play. Terdapat pengaturan volume, dan juga durasi berapa lama mendengarkan.

Tampilan html5 audio player bisa berbeda-beda sesuai browser yang digunakan. Gambar di bawah adalah contoh tampilan pada 3 browser yang berbeda.

Kira-kira tampilan di browser apa ya yang paling Anda suka? daripada penasaran, mari langsung kita coba pasang playernya.

Kode Embed Player Radio Streaming HTML5

<audio src="https://r5.siar.us:8500/stream" preload="auto" controls></audio>

Untuk memasang player pada web/blog milik Anda, ganti paramater src= menjadi server address radio streaming yang Anda miliki. Sertakan http atau https sebelum address seperti contoh di atas.

Agar player dapat berbunyi otomatis saat pertama kali dibuka. Tambahkan pilihan autoplay seperti contoh di bawah ini :

<audio src="https://r5.siar.us:8500/stream" preload="auto"controls autoplay></audio>

Dengan tambahan parameter autoplay, player radio streaming HTM5 akan langsung berbunyi tanpa pengunjung menekan tombol play. Sayangnya pilihan autoplay belum tentu bisa di semua browser. Ada beberapa browser memblokir fitur autoplay. Tapi tidak menjadi masalah yang berarti karena pengunjung bisa tetap menekan tombol play secara manual.

Anda dapat memasang player radio streaming HTML5 pada bagian web/blog yang Anda inginkan. Tinggal copy paste kode di atas. Dapat dipasang pada CMS WordPress, Joomla, Drupal dan sebagainya. Browser modern seperti Firefox, Chrome, Opera, Safari mendukung player ini baik dalam format mp3, aac, dan opus. Juga dapat diakses melalui smartphone Android & iOS.

Selamat mencoba.

Per maret 2020, streaming non SSL tidak dapat di putar melalui browser chrome. Pastikan streaming Anda sudah mendukung protokol secure HTTPS

Referensi

Share