不常用但是又得有的一个标签——音频(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", "");
            }
        })

就是有一个缺陷，刚入门有点生疏，回过头来复习的时候，我在想吧，，

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

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

原文地址：https://www.cnblogs.com/wz1223/p/11936451.html