html 控制 多个音频Audio标签

ps需求如下图

            <div class="cwbr-con">
                    <ul>
                    <li>
                        <p class="cc-text fl dhsl">音频名称音频名称音频</p>
                        <p class="cc-icon-player fl"></p>
                        <p class="cc-icon-close fr" style="display: none"><a  class="pauseAuto"><i class="iconfont icon-zanting"></i></a></p>
                        <p class="cc-icon-open fr" ><a  class="openmusic"><i class="iconfont icon-bofang"></i></a></p>
                        <audio style="display:none; height: 0" preload="auto" src="audio/莎娜姑娘%20(V0).mp3" ></audio>
                    </li>
                    <li>
                        <p class="cc-text fl dhsl">音频名称音频名称音频名称</p>
                        <p class="cc-icon-player fl"></p>
                        <p class="cc-icon-close fr" style="display: none"><a  class="pauseAuto"><i class="iconfont icon-zanting"></i></a></p>
                        <p class="cc-icon-open fr" ><a  class="openmusic"><i class="iconfont icon-bofang"></i></a></p>
                        <audio style="display:none; height: 0" preload="auto" src="audio/一千个伤心的理由%20(clip).mp3" ></audio>
                    </li>
                </ul>
            </div>

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如下：

<script>
    $(".cwbr-con").find("li .openmusic").click(function () {
        // 获取到audio 元素对象
        var audio = $(this).parent().siblings().find("audio").prevObject[3];
        audio.play();
        $(this).parent().siblings(".cc-icon-close").css({"display":"block"});
        $(this).parent().siblings(".cc-icon-player").css({"display":"block"});
        $(this).parent(".cc-icon-open").css({"display":"none"});
    })

    $(".cwbr-con").find("li .pauseAuto").click(function () {
        // 获取到audio 元素对象
        var audio = $(this).parent().siblings().find("audio").prevObject[3];
        audio.pause();
        $(this).parent().siblings(".cc-icon-open").css({"display":"block"});
        $(this).parent().siblings(".cc-icon-player").css({"display":"none"});
        $(this).parent(".cc-icon-close").css({"display":"none"});
    })
</script>

效果图：

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

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

后期会优化。

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