<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

            background: #2b2938;

        }

        .btn-audio {

            margin: 90px auto;

            width: 186px;

            height: 186px;

            background: url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png) no-repeat;

            background-size: cover;

        }

    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="btn-audio">

        <audio class="mp3Btn">

            <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />

        </audio>

    </div>

    <div class="btn-audio">

        <audio class="mp3Btn" controls="controls">

            <source src="http://www.ytmp3.cn/down/49366.mp3?v=15" type="audio/mpeg" />

        </audio>

    </div>

    <div class="btn-audio">

        <audio class="mp3Btn" controls="controls">

            <source src="http://www.ytmp3.cn/down/49366.mp3?v=15" type="audio/mpeg" />

        </audio>

    </div>

    <div class="btn-audio">

        <audio class="mp3Btn" controls="controls">

            <source src="http://www.ytmp3.cn/down/49366.mp3?v=15" type="audio/mpeg" />

        </audio>

    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

    <script type="text/javascript">

        $(function () {

            //播放完毕

            $('#mp3Btn').on('ended', function () {

                console.log("音频已播放完成");

                $('.btn-audio').css({

                    'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',

                    'background-size': 'cover'

                });

            })

            $('.btn-audio').click(function () {

                var cindex = $(this).index();

                $('.btn-audio').each(function (i) {

                    // var audio=item.children('.mp3Btn')[0];

                    var audio = $(this).children('.mp3Btn')[0];

                    if (i == cindex) {

                        if (audio.paused) { //如果当前是暂停状态

                            $(this).css({

                                'background': 'url(http://img.d1xz.net/d/2018/07/5b567509be452.png)',

                                'background-size': 'cover'

                            });

                            audio.play();

                        } else { //当前是播放状态

                            $(this).css({

                                'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',

                                'background-size': 'cover'

                            });

                            audio.pause();

                        }

                    } else {

                        if (!audio.paused) { //当前是播放状态

                            $(this).css({

                                'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',

                                'background-size': 'cover'

                            });

                            audio.pause();

                        }

                    }

                });

            });

        })

    </script>

</body>

</html>

多个音频audio2的更多相关文章

  1. H5页面音频自动播放问题

        最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源.一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折.       下面有三种常规 ...

  2. Android应用开发学习笔记之播放音频

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz Android支持常用音视频格式文件的播放,本文我们来学习怎样开发Android应用程序对音视频进行操作. Andr ...

  3. App中h5音频不能播放问题

    前置:以下问题是针对vue项目的解决方案 问题一:IOS中音频不能自动播放 原因:ios禁止了音频自动播放 解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注 ...

  4. FFmpeg学习6：视音频同步

    在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...

  5. 一个免费的、跨平台的、开源音频编辑器Audacity

    Audacity 是一个免费的开源程序,用于编辑音频录制.它可在多个平台(windows/linux)上运行.Audacity 基于 GUI,是一个具有多种选项的强大程序.它支持您录制各种类型的声音. ...

  6. FFmpeg + SoundTouch实现音频的变调变速

    本文使用FFmpeg + SoundTouch实现将音频解码后,进行变调变速处理,并将处理后的结果保存为WAV文件. 主要有以下内容: 实现一个FFmpeg的工具类,保存多媒体文件所需的解码信息 将解 ...

  7. RIFF和WAVE音频文件格式

    RIFF file format RIFF全称为资源互换文件格式(Resources Interchange File Format),是Windows下大部分多媒体文件遵循的一种文件结构.RIFF文 ...

  8. linux下mono播放PCM音频

         测试环境: Ubuntu 14 MonoDevelop CodeBlocks 1.建立一个共享库(shared library) 这里用到了linux下的音频播放库,alsa-lib. al ...

  9. iOS开发系列--音频播放、录音、视频播放、拍照、视频录制

    --iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...

随机推荐

  1. 按键精灵对VBS的支持

    VBSBegin…VBSEnd(VBS块)格式:VBSBegin...VBSEnd用途:可以在VBS块的区域内随意的书写VBS语法指令. 更多说明:由于彻底的转向VBS语言,会导致goto语句不能被兼 ...

  2. 对象的notify方法的含义和对象锁释放的三种情况

    1,notify的含义     (1)notify一次只随机通知一个线程进行唤醒 (2)在执行了notify方法之后,当前线程不会马上释放该对象锁,呈wait状态的线程也不能马上获得该对象锁, 要等到 ...

  3. Api2Doc生成 Restful API 文档

    1,引入maven <dependency> <groupId>com.github.terran4j</groupId> <artifactId>te ...

  4. python's object model

    ［python's object model］ 1.object.__init__(self[, ...])        如果subclass没有实现__init__,那么python类在实例化的时 ...

  5. IIS上架设https网站证书处理备忘

    1. 免费SSL证书申请 https://www.startssl.com 教程:http://hxs.fd.fj.cn/?action=show&id=13 2. 证书转换 申请到的证书有两 ...

  6. SpringMvc配置拦截器

    SpringMVC可以通过配置拦截器,进行url过滤等处理. 在spring-mvc.xml的配置文件中,如下示: 其中,在<mvc:interceptors>中可以配置多个拦截器< ...

  7. Spring中的注解配置-注入bean

    在使用Spring框架中@Autowired标签时默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...

  8. IP地址工具类

    /// <summary> /// 获取客户端IP地址 /// </summary> /// <returns></returns> public st ...

  9. PHP中的各种POST或GET请求

    1.表单<form> 2.fsockopen(); 3.jquery语法: $.post ($.ajax的简写) 示例代码: <!DOCTYPE html> <html& ...

  10. __slots__（面向对象进阶）

    1.__slots__是什么:是一个类变量,变量值可以是列表,元祖,或者可迭代对象,也可以是一个字符串(意味着所有实例只有一个数据属性) 2.引子:使用点来访问属性本质就是在访问类或者对象的__dic ...