<style>
.my-audio-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
}
.my-audio-button:hover {
background: rgba(255, 255, 255, 0.3);
}
.my-audio-icon svg {
width: 24px;
height: 24px;
fill: currentColor;
}
#sc-widget {
display: none;
}
</style>

<div class="my-audio-button" onclick="toggleAudio()">
<span id="myAudioIcon" class="my-audio-icon">
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12 3v10.55C11.41 13.21 10.73 13 10 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V5h4V3h-6z"/>
<line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" stroke-width="2"/>
</svg>
</span>
</div>

<iframe
id="sc-widget"
width="100%"
height="166"
scrolling="no"
frameborder="no"
allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/abylay-khakimzhanov/asylbek-ensepov-detstvo-kui%3Fsi%3D98380d6a16d64a49a75494ffcefc830f%26utm_source%3Dclipboard%26utm_medium%3Dtext%26utm_campaign%3Dsocial_sharing&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&visual=false">
</iframe>

<script src="https://w.soundcloud.com/player/api.js"></script>
<script>
let isPlaying = false;
const audioIcon = document.getElementById('myAudioIcon');
const widget = SC.Widget(document.getElementById('sc-widget'));

const iconMusicOff = `
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12 3v10.55C11.41 13.21 10.73 13 10 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V5h4V3h-6z"/>
<line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" stroke-width="2"/>
</svg>`;

const iconMusicOn = `
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12 3v10.55C11.41 13.21 10.73 13 10 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V5h4V3h-6z"/>
</svg>`;

function toggleAudio() {
widget.isPaused(function(paused) {
if (paused) {
widget.play();
} else {
widget.pause();
}
});
}

widget.bind(SC.Widget.Events.PLAY, function() {
isPlaying = true;
audioIcon.innerHTML = iconMusicOn;
});

widget.bind(SC.Widget.Events.PAUSE, function() {
isPlaying = false;
audioIcon.innerHTML = iconMusicOff;
});
</script>