<!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. java CPU 100% 排查

    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. (友情提示:本博文章欢迎转载,但请注明出处:hankchen,http://www.blogjava.net/hank ...

  2. 第三方工具Jdom解析XML

    需要导入的jar包:jdom-2.0.6.jar package com.huawei.xml; import java.io.File;import java.io.FileOutputStream ...

  3. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

  4. RNA -seq

    RNA -seq RNA-seq目的.用处::可以帮助我们了解,各种比较条件下,所有基因的表达情况的差异. 比如:正常组织和肿瘤组织的之间的差异:检测药物治疗前后,基因表达的差异:检测发育过程中,不同 ...

  5. Caffe 议事（三）：从零开始搭建 ResNet 之 网络的搭建（中）

    上面2个函数定义好了,那么剩下的编写网络就比较容易了,我们在ResNet结构介绍中有一个表,再贴出来: Layer_name Output_size 20-layer ResNet Conv1 32 ...

  6. 用OLEDB读取EXCEL时,单元格内容长度超过255被截断

    https://support.microsoft.com/zh-cn/help/189897/data-truncated-to-255-characters-with-excel-odbc-dri ...

  7. Interceptor for {http://cxf.liuyang.com/}IHiServiceService has thrown exception, unwinding now org.apache.cxf.binding.soap.SoapFault: Error reading XMLStreamReader.

    Jquery同域访问:客户端连接服务器访问跨域访问:通过本地html文档,浏览器点击开访问(jquery不支持此访问) 用域名的方式访问http://localhost:8080/CXF_09_jqu ...

  8. metasploit-数据库支持

    db_status db_disconnect db_connect 用户名:口令@服务器地址:端口/数据库名称 createdb msf4 -E UTF8 -T template0 -o msf3 ...

  9. mongodb-win32-i386-3.0.6 使用常见错误

    1.Error parsing YAML config file: yaml-cpp: error at line 3, column 28: unknown escape character: m ...

  10. jmeter 计数器 （可自动生成新数字、注册专用）

    1.打开jmeter,创建好线程组后,添加计数器 2.设置计数器 3.添加HTTP请求,验证所设置的计数器 4.填写对应参数 5.添加查看结果树,查看结果 6.修改一下线程属性 7.跑一下,看下结果就 ...