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

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

下面是我的html代码:

  1. <ul class="ul-list1-td">
  2. <li>
  3. <a href="JavaScript:;" class="con" date-a="images/莫籽 - 太多.mp3">
  4. <audio src="" autoplay></audio>
  5. <span class="audio-mp" id="auto-ado"><i style="background-image: url(images/yy-icon1-0.png);"
  6. class="i2"></i> 语音讲解</span>
  7. <h3 class="tit">
  8. <i style="background-image: url(images/shb-icon.png);"></i>
  9. 会飞的土豆
  10. </h3>
  11. </a>
  12. </li>
  13. <li>
  14. <a href="JavaScript:;" class="con" date-a="images/誓言 - 求佛.mp3">
  15. <audio src="" autoplay></audio>
  16. <span class="audio-mp" id="auto-ado"><i style="background-image: url(images/yy-icon1-0.png);"
  17. class="i2"></i> 语音讲解</span>
  18. <h3 class="tit">
  19. <i style="background-image: url(images/shb-icon.png);"></i>
  20. 求佛
  21. </h3>
  22. </a>
  23. </li>
  24. <li>
  25. <a href="JavaScript:;" class="con" date-a="images/莫籽 - 太多.mp3">
  26. <audio src="" autoplay></audio>
  27. <span class="audio-mp" id="auto-ado"><i style="background-image: url(images/yy-icon1-0.png);"
  28. class="i2"></i> 语音讲解</span>
  29. <h3 class="tit">
  30. <i style="background-image: url(images/shb-icon.png);"></i>
  31. 太多
  32. </h3>
  33. </a>
  34. </li>
  35. </ul>

这个是js:

  1. $(".audio-mp").click(function () {
  2. var aa = $(this).parent(".con").attr("date-a");
  3. console.log(aa);
  4. var cc = $(this).siblings("audio").attr("src");
  5. if (cc == "") {
  6. var cc = $(this).siblings("audio").attr("src", aa);
  7. console.log(cc);
  8. } else {
  9. var cc = $(this).siblings("audio").attr("src", "");
  10. }
  11. })

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

  1. $(".audio-mp").click(function () {
  2. var aa = $(this).parent(".con").attr("date-a");
  3. console.log(aa);
  4. var cc = $(this).siblings("audio").attr("src");
  5. if (cc == "") {
  6. var cc = $(this).siblings("audio").attr("src", aa);
  7. $(this).parents("li").siblings("li").find("audio").trigger("pause");
  8. console.log(cc);
  9. } else {
  10. var cc = $(this).siblings("audio").attr("src", "");
  11. }
  12. var stop = $(this).parent().parent("li");
  13. stop.toggleClass("on");
  14. if (stop.hasClass("on")) {
  15. stop.siblings("li").removeClass("on");
  16. stop.addClass("on");
  17. } else {
  18. stop.removeClass("on");
  19. }
  20. })

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

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

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

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

不常用但是又得有的一个标签——音频(audio)的更多相关文章

  1. jsp中一个标签两种方式绑定两个click事件导致未执行的问题

    近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...

  2. 运行vs时打开一个浏览器窗口,而不是在原有窗口上打开一个标签

    1.运行vs时打开一个浏览器窗口,而不是在原有窗口上打开一个标签,结束调试时窗口又关闭了,特别麻烦. 在用swagger调试接口时,好不容易输入了测试数据,然而窗口关闭了,再次调试又得重新输入. 解决 ...

  3. gvim写html代码时如何快速地跳转到一个标签的结束位置: 终极插件: matchit.vim

    gvim写html代码时如何快速地跳转到一个标签的结束位置 参考这个vimrc的配置, 里面有一些 很好的东西, 配置很有用, 以前没有用到: http://www.cnblogs.com/wangj ...

  4. JavaScript多个音频audio标签,点击其中一个播放时,其他的停止播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. cocos2dx 某缩放的页面 CCTableView最后一个标签无法点中

    有一个二级界面,在ipad4下面放大到1.6倍,直接对最外层的CCLayer缩放的,里面包含有CCTableView.结果运行的时候无法选中到最后一个标签,无论总的标签是2个还是更多,单步调试,发现到 ...

  6. [原创]java WEB学习笔记40:简单标签概述(背景,使用一个标签,标签库的API,SimpleTag接口,创建一个自定义的标签的步骤 和简单实践)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  7. selenium控制超链接在当前标签页中打开或重新打开一个标签页

    selenium控制超链接在当前标签页中打开或重新打开一个标签页 在web页面源码中,控制超链接的打开是在当前标签页还是重新打开一个标签页,是由属性target=“_black”进行控制的.如果还有属 ...

  8. jquery判断一个标签是否包含另外一个标签

    jquery判断一个标签是否包含另外一个标签 一.总结 一句话总结: jquery的find方法配合length属性:if($("#video_md_9_1").find(&quo ...

  9. python+selenium遍历某一个标签中的内容

    一.python+selenium遍历某一个标签中的内容 举个例子:我要获取列表标签<li></li>的内容 根据python+selenium定位到列表整体,使用for循环获 ...

随机推荐

  1. web自动化针对PO模式进行二次封装之basepage

    在PO模式当中,我们做到了页面对象与测试用例的分离,但在页面对象编写时,我们仍然还有优化的空间.页面对象有一些共同的基本操作,可以封装起来,并可以在基本操作当中加上日志和异常截图的处理.比如说我们在查 ...

  2. 解决邮件发送错误:503 Error: need EHLO and AUTH first

    引用文章 https://blog.csdn.net/lingfeian/article/details/96731620 问题描述 2019-07-21 16:14:00.449 ERROR 966 ...

  3. redis设置、查看和校验密码

    Redis没有实现访问控制这个功能,但是它提供了一个轻量级的认证方式(密码),可以通过编辑[redis.conf]配置文件来启用认证,这里简单介绍一下Redis中如何设置.查看和校验密码(登录验证和操 ...

  4. jquery中的ajax请求到php(学生笔记)

    首先ajax的基本语法基础.(必须得引入一个jquery文件,下面的例子展示用了网上的jquery文件,要联网.) 2.请求成功(复制代码运行观察效果) <!DOCTYPE html> & ...

  5. SwiftUI学习(二)

    教程 2 - Building Lists and Navigation Section 4 - Step 2: 静态 List var body: some View { List { Landma ...

  6. windows linux 通过SSH X11Forwrding 使用图形化界面

    有时候,我们需要在命令行中使用远程的GUI程序,这样我们就需要x11转发的来进行访问: Linux平台下不需要特别的配置,假如我们要远程的机器是centos机器,只要做如下配置即可: #vi /etc ...

  7. [日常] gocron源码阅读-go语言的变量

    变量的声明形式是这样的 var 变量名字 类型 = 表达式var ( AppVersion = "1.5" BuildDate, GitCommit string)类型可以被省略, ...

  8. HTTP GET POST PUT DELETE 四种请求

    1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...

  9. equals和==的应用场景

    今天我知道了 抽象类主要作为多个类的模板,接口则定义了多个类应该遵守的规范. "=="比"equals"运行速度快,因为"=="只是比较引用 ...

  10. 【BZOJ2655】calc(拉格朗日插值)

    bzoj 题意: 给出\(n\),现在要生成这\(n\)个数,每个数有一个值域\([1,A]\).同时要求这\(n\)个数两两不相同. 问一共有多少种方案. 思路: 因为\(A\)很大,同时随着值域的 ...