不常用但是又得有的一个标签——音频(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);
                console.log(cc);
            } else {
                var cc = $(this).siblings("audio").attr("src", "");
            }
        })

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

    $(".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");
            }
        })

但是又出现一个新问题，就是我给了他一个人鼠标点击之后的效果，但是你点击多次之后他就没用了。当时我的思路是点击之后就可以播放，同时给他一个鼠标点击之后的状态，但是点的次数了多之后就是你状态有时候在他播放 ，状态不在他也播放，期待下次的更新应该就会好很多的，

g刚入门有点生疏，回过头来复习的时候，我在想吧，，

对了最近看到一个好用的插件库：http://www.dowebok.com/   学习的话可以去看一下基本上都是我们前端常用的插件！

最后祝大家工作顺利，以及感谢dowebok这个网站！