<!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. tcpdf中文解决方案

    步骤如下:1.确保你测试tcpdf能正常输出英文内容的pdf2.测试输入中文内容后显示是?的乱码或者空白分析原因,是因为我们输入的中文,tcpdf字体库并不支持,因此乱码或者空白显示 添加一个合适的字 ...

  2. ScheduledThreadPoolExecutor 线程池调度 使用

    package other; import java.util.concurrent.Callable; import java.util.concurrent.Executors; import j ...

  3. Spring Boot 异步调用

    添加一个类ThreadPoolConfig.java package com.cjcx.inter.framework.config; import org.springframework.conte ...

  4. java.lang.VerifyError: Inconsistent stackmap frames at branch target 81

    java项目中有如下代码: @RequestMapping(value = "/getMxList") @ResponseBody public Map<String, Ob ...

  5. 利用 Chrome 原生工具进行网页长截图

    转自https://sspai.com/post/42193 要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本.在想要截图的网页中,首先按下 ⌘Command + ⌥Opti ...

  6. Get The Client Info From PHP SERVER Arrary

    Get The Client Info From PHP SERVER Arrary <?php date_default_timezone_set( "Asiz/Shanghai&q ...

  7. gatttool的使用

    1.使能hci接口 # hciconfig hci0 up 2.使用hcitool搜索BLE设备 # hcitool lescan LE Scan ...D0:39:72:BE:D2:26 (unkn ...

  8. BUG记忆

      保留两位小数 <fmt:formatNumber value="${list.avgAssessment}" pattern="#.00#"/> ...

  9. 20155230 2016-2017-2 《Java程序设计》第七周学习总结

    20155230 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 世界时:在1972年引入UTC之前,GMT与UT是相同的 格林威治标准时间(GMT),现已不 ...

  10. idea中代码补全

    在IDEA中,默认的代码自动提示不够智能,现在配置成更加智能的方式. File-Settings-Editor-General-Code Completion中 把最上面的大小写敏感度改成none,下 ...