html多个语音播放,html 控制 多个音频Audio标签

ps需求如下图

音频名称音频名称音频

音频名称音频名称音频名称

CSS样式如下：

.cwbr-con ul li{

width: 100%;

height: 60px;

line-height: 60px;

border-bottom: 1px dashed #d0c4bc;

}

.cwbr-con ul li p.cc-text{

width: 70%;

font-size: 16px;

}

.cwbr-con ul li p.cc-icon-player{

width: 20px;

height: 60px;

background-image: url("../images/player.gif");

background-repeat: no-repeat;

background-position: 5px 22px;

background-size: 18px 15px;

display: none;

}

.cwbr-con ul li p a{

color: #907363;

cursor: pointer;

}

JS如下：

效果图：

缺点：  1.点击播放另一个音频时,不能自动关闭其他正在播放的音频(会出现多个音频同时播放如上面效果图)。

2.音频播放完，还是显示正在播放时的状态。

后期会优化。

tip: 本例中播放暂停图标使用的是阿里图标。  播放中动画使用的是gif背景图片