简单音频播放器：HTML、CSS 和 JavaScript 代码示例

<html>
 <head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>简单音频播放器</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>简单音频播放器</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(&quot;play&quot;);
audio.play();
}
</script></p>
 </body>
</html>