Pemutar audio.Mp3
Daftar catatan:
1. Pemutar audio Mp3 type 1
2. Pemutar audio Mp3 type 2
3. Pemutar audio Mp3 type 3
4..---
5..----
Type 2
<!--Tombol Mp3-->
<button onclick="putarNona(this)" style="background: none; border: none; cursor: pointer; font-size: 25px; height: 50px; outline: none; width: 50px;"><span style="display: inline-block; font-size: 24px; transform: rotate(90deg);">🔺</span></button>
<audio id="Nona" src="https://www.dropbox.com/scl/fi/yaq5s0b4vmupobxu9ks8w/Putri-Ariani-Perfect-Liar.mp3?rlkey=dd750vugl92tlgbtf0sz5pkjo&st=d6g8bxe4&raw=1"></audio>
<script>
function putarNona(tombol)
if (audio.paused) {audio.play();
tombol.innerHTML = '⏸️';}
tombol.innerHTML = '<span style="display:inline-block; transform: rotate(90deg); font-size:24px;">🔺</span>';}
audio.onended = () => {tombol.innerHTML = '<span style="display:inline-block; transform: rotate(90deg); font-size:24px;">🔺</span>';};}
</script>
Type 3
File Tombol Mp3 dengan id= Musafir <style>
.circle-button { position: fixed;
top: 15px;
left: 10%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background-color: #c00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;}
.blinking-icon
{ animation: blink-icon 1s infinite;}
@keyframes blink-icon { 0%, 100% { opacity: 1; }
50% { opacity: 0.2; }}
.play-icon { width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent white;}
.pause-icon { position: relative;
width: 16px;
height: 20px; }
.pause-icon::before,
.pause-icon::after
{ content: '';
position: absolute;
top: 0;
width: 6px;
height: 100%;
background: white; }
.pause-icon::before { left: 0; }
.pause-icon::after { right: 0; }
</style>
<div class="circle-button" onclick="toggleMusafir(this)">
<div class="play-icon blinking-icon"></div>
</div>🔲
<script>
function toggleMusafir(button) { const audio = document.getElementById('Musafir');
const icon = button.querySelector('div');
if (audio.paused) { audio.play();
icon.className = 'pause-icon'; }
else { audio.pause(); icon.className = 'play-icon blinking-icon';}
audio.onended = () => {icon.className = 'play-icon blinking-icon';}; }</script>
Tombol Mp3 dengan id= Musafir <audio id="Musafir" src="https://www.dropbox.com/scl/fi/yaq5s0b4vmupobxu9ks8w/Putri-Ariani-Perfect-Liar.mp3?rlkey=dd750vugl92tlgbtf0sz5pkjo&st=d6g8bxe4&raw=1"></audio>
Jika menanamkan tombol di Halaman, script di gadged
Jika tombol dan script ditanamkan di gadged, untuk semua halaman
https://youtu.be/H8Z8XNESR5Eh
ttps://youtube.com/embed/H8Z8XNESR5E
https://youtu.be/lMqA5o2fM10?si=I392FEk-QIArtLkG
https://youtube.com/embed/lMqA5o2fM10?si=I392FEk-QIArtLkG
https://youtu.be/H8Z8XNESR5E?si=SVL3DMG0INCLxLsn