音频播放按钮点击后无法播放的常见原因及解决方法
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
.player {
width: 300px;
margin: 10px auto;
}
<p>.progress-bar {
width: 100%;
height: 10px;
background-color: #ccc;
}</p>
<p>#progress {
width: 0;
height: 100%;
background-color: #ff0000;
}
.playdio{
width:30px;
height:30px;
}
</style></p>
</head>
<body>
<h1>Hello world</h1>
<div class="player">
<audio id="audio-player" src="55168229191131-232174176229191181.mp3"></audio>
<img class="playdio" src="img/gdt_ic_express_play.png"/>
<div class="progress-bar">
<div id="progress"></div>
</div>
</div>
<script>
var audio = document.getElementById("audio-player");
const audioPlayer = document.getElementById('audio-player');
const progressBar = document.getElementById('progress');
<p>audioPlayer.addEventListener('timeupdate', function() {
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
progressBar.style.width = <code>${progress}%</code>;
});
audio.onclick=function () {
alert('play');
audio.play();
}
</script></p>
</body>
</html>为什么按钮点击后无法播放内容：按钮点击后无法播放的原因可能有以下几种可能性：
<ol>
<li>
<p>音频文件路径错误：请确保音频文件的路径正确，可以通过检查文件路径是否正确以及文件是否存在来确认。</p>
</li>
<li>
<p>浏览器不支持自动播放：某些浏览器禁止自动播放音频，需要用户手动触发播放事件。您可以尝试添加一个用户点击事件来触发音频的播放。</p>
</li>
<li>
<p>浏览器安全限制：某些浏览器可能会对自动播放进行限制，特别是在没有用户交互的情况下。您可以尝试添加一个用户交互事件，例如在页面加载完成后自动播放音频。</p>
</li>
<li>
<p>音频文件格式不支持：请确保音频文件的格式是浏览器支持的格式，例如MP3格式。可以尝试将音频文件转换为不同的格式来测试是否可以播放。</p>
</li>
</ol>
<p>如果以上方法都无法解决问题，建议您检查浏览器的控制台输出，查看是否有任何错误信息，以帮助进一步定位问题。</p>
原文地址: https://www.cveoy.top/t/topic/pXVz 著作权归作者所有。请勿转载和采集!