我有代码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>
和js代码
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;
}
},
};
}
我上传了文件，但是它工作了，但是当我们播放音频流时，它在现代浏览器中不起作用。
这是url我的网站:https://suaranabawiy.netlify.app/radio
我用开发人员工具检查了一个错误:Uncaught (in promise) DOMException: play()请求被调用pause()中断
你能帮我让我的代码在最新的浏览器中工作吗?
我使用tailwindcss和alpine.js
问题是你正在加载的音频文件。您正在请求一个HTML页面并将其放置在音频标记中。请求失败，但状态更新为playing。当你再次点击它时，你会得到你描述的错误信息。
Audio标签必须有一个有效的source。要了解有关支持的源代码的更多信息，请查看此处。
同样，您不能将音频流服务嵌入到音频文件中。