Tombol play dan stop audio

Kode untuk membuat tombol play dan stop audio
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Artikel Terkait
inspiradio

Kode dibawah ini pernah saya gunakan dalam membuat audio player sederhana di inspiradio untuk memutar dan memberhentikan audio yang diambil dari radio online inspiradio.

Walaupun saat ini tampilannya masih sama, namun sudah tidak digunakan sebagai tombol play stop audio lagi karena sudah digantikan menjadi link untuk membuka halaman khusus player radio (membuka tab baru).

<div class="player-container">
	<div id="play-pause" class="play"></div>
</div>

<audio id="inspiradio" loop hidden>
	<source src="https://listen.inspiradio.id:9000/live" type="audio/mp3" />
</audio>
.player-container #play-pause {
	cursor: pointer;
	height:40px;
	width: 40px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
	background-repeat: no-repeat!important;
	background-position:center;
	background-size:20px;
	background-color: color(4);
	border-radius:50px;
	margin-top:-15px;
	animation:circle 1s infinite;
}
.play {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
}
.pause {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==)!important;
}
var track = document.getElementById('inspiradio');
var controlBtn = document.getElementById('play-pause');	
function playPause() {
  if (track.paused) {
    track.play();
    controlBtn.className = "pause";			
  } else { 
    track.pause();
    controlBtn.className = "play";			
  }
}
controlBtn.addEventListener("click", playPause);
track.addEventListener("ended", function() {
  controlBtn.className = "play";
});

});

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Artikel Terkait

oxygen builder meta query product on sale
Oxygen Builder Repeater - Woocommerce Product On Sale
Catatan: Lihat gambar diatas (Oxygen Builder Advanced Query), dan jangan lupa menambahkan query: post_type : product posts_per_page : -1 // […]
Kode One Page Scroll
Demo kode dibawah ini bisa anda lihat pada halaman Demo Onepage Scroll. Kode HTML Kode Javascript Kode CSS Sumber: https://github.com/peachananr/onepage-scroll
Warna WooCommerce pada Oxygen Builder
Keterangan: Ganti color(45) dengan hex warna atau variabel warna pada Oxygen Builder.
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross