不常用但是又得有的一个标签——音频(audio)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这几天做一个项目里面出现了H5的一个标签，音频(audio)，可以说这是我第一次遇见这种标签基本上很少用的，也许是我做的项目少吧，

下面我来说一下我的思路，当然这是我自己想的，当时我想到的是如何让一个音频点击之后可以播放，但是做的还是不是特别好，就是点击之后可以播放，但是你点击下一个的时候他不会自动停止，你得手动点一下才会停止播放，这一点我想了好一会还是没有解决哪位大佬要是有思路可以和我说一下。

下面是我的html代码：

<ul class="ul-list1-td">
<li>
<a href="JavaScript:;" class="con" date-a="images/莫籽 - 太多.mp3">
<audio src="" autoplay></audio>
<span class="audio-mp" id="auto-ado"><i style="background-image: url(images/yy-icon1-0.png);"
class="i2"></i> 语音讲解</span>
<h3 class="tit">
<i style="background-image: url(images/shb-icon.png);"></i>
会飞的土豆
</h3>
</a>
</li>
<li>
<a href="JavaScript:;" class="con" date-a="images/誓言 - 求佛.mp3">
<audio src="" autoplay></audio>
<span class="audio-mp" id="auto-ado"><i style="background-image: url(images/yy-icon1-0.png);"
class="i2"></i> 语音讲解</span>
<h3 class="tit">
<i style="background-image: url(images/shb-icon.png);"></i>
求佛
</h3>
</a>
</li>
<li>
<a href="JavaScript:;" class="con" date-a="images/莫籽 - 太多.mp3">
<audio src="" autoplay></audio>
<span class="audio-mp" id="auto-ado"><i style="background-image: url(images/yy-icon1-0.png);"
class="i2"></i> 语音讲解</span>
<h3 class="tit">
<i style="background-image: url(images/shb-icon.png);"></i>
太多
</h3>
</a>
</li>
</ul>

这个是js：

这是第二次修改之后的代码：

$(".audio-mp").click(function () {
var aa = $(this).parent(".con").attr("date-a");
console.log(aa);
var cc = $(this).siblings("audio").attr("src");
if (cc == "") {
var cc = $(this).siblings("audio").attr("src", aa);
$(this).parents("li").siblings("li").find("audio").trigger("pause");
console.log(cc);
} else {
var cc = $(this).siblings("audio").attr("src", "");
}
var stop = $(this).parent().parent("li");
stop.toggleClass("on");
if (stop.hasClass("on")) {
stop.siblings("li").removeClass("on");
stop.addClass("on");
} else {
stop.removeClass("on");
}
})