no sound in modern browser - alpine.js

Question

i have code index.html
<!-- play and stop button -->
<div x-data="playaudio()" class="grid place-content-center m-14">
<button #keydown.tab="playAndStop" #click="playAndStop" type="button"
class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">
<div class="absolute inset-0 flex items-center justify-center p-8">
<div class="w-full h-full transition duration-300 ease-in-out bg-cyan-500 filter group-hover:blur-2xl">
</div>
</div>
<div
class="absolute inset-0 flex items-center justify-center transition duration-200 ease-in-out bg-black rounded-xl bg-opacity-30 group-hover:bg-opacity-20">
<div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5">
<!-- icon play -->
<svg
class="w-20 h-20 text-white text-opacity-0 transition duration-150 ease-in-out hover:text-opacity-20"
viewBox="0 0 284 284" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M184.197 129.243L135.177 96.5521C132.865 95.01 130.178 94.1249 127.403 93.9915C124.628 93.8581 121.868 94.4813 119.419 95.7946C116.971 97.1079 114.925 99.0619 113.501 101.448C112.077 103.834 111.327 106.562 111.333 109.34V174.706C111.333 177.482 112.086 180.206 113.513 182.588C114.939 184.969 116.985 186.919 119.433 188.228C121.881 189.538 124.638 190.158 127.411 190.024C130.183 189.889 132.867 189.004 135.177 187.463L184.197 154.773C186.297 153.373 188.019 151.475 189.21 149.25C190.401 147.025 191.024 144.54 191.024 142.015C191.024 139.491 190.401 137.006 189.21 134.781C188.019 132.555 186.297 130.658 184.197 129.258V129.243Z"
fill="white"></path>
<path
d="M280 142C280 160.122 276.431 178.067 269.495 194.81C262.56 211.553 252.395 226.766 239.581 239.581C226.766 252.395 211.553 262.56 194.81 269.495C178.067 276.431 160.122 280 142 280C123.878 280 105.933 276.431 89.1897 269.495C72.4468 262.56 57.2337 252.395 44.4193 239.581C31.6048 226.766 21.4398 211.553 14.5046 194.81C7.56947 178.067 4 160.122 4 142C4 105.4 18.5392 70.2993 44.4193 44.4193C70.2993 18.5392 105.4 4 142 4C178.6 4 213.701 18.5392 239.581 44.4193C265.461 70.2993 280 105.4 280 142Z"
stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div x-show="currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5">
<!-- icon stop -->
<svg xmlns="http://www.w3.org/2000/svg"
class="w-20 h-20 text-white text-opacity-0 transition duration-150 ease-in-out hover:text-opacity-20"
viewBox="0 0 20 20" fill="white">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</button>
<audio x-ref="audio" preload="none" autoplay="autoplay">
<source src="http://119.235.249.201:8872/;" type="audio/mpeg" />
</audio>
</div>
and code js is
function playaudio() {
return {
currentlyPlaying: false,
//play and stop the audio
playAndStop() {
if (this.currentlyPlaying) {
this.$refs.audio.pause();
this.$refs.audio.currentTime = 0;
this.currentlyPlaying = false;
} else {
this.$refs.audio.play();
this.currentlyPlaying = true;
}
},
};
}
I uploaded the file but it worked but when we play the audio stream it doesn't work in modern browsers.
this is url my website : https://suaranabawiy.netlify.app/radio
I checked with developer tools for an error : Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
can you help me to make my code work in the latest browser ?
i use tailwindcss and alpine.js

Answer 1

The problem is with the audio file you're loading. You're requesting an HTML page and placing it inside the audio tag. The request fails but the status was updated to playing. When you click it again you get the error message you described.
Audio tag must have a valid source. To learn more about the supported sources, check here.
Again, you cannot embed a service for audio streaming as an audio file.