<!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. Sqlserver2012的数据导入到sqlserver2008或sqlserver2008R2

    我采取的是sql语句的方式 将Sqlserver2012的表结构导出成sql语句,数据也导出成sql语句 一.点击数据库名称右键=========>属性 二.导出表结构与数据为sql语句 htt ...

  2. Spring Boot下Druid连接池的使用配置分析

    https://blog.csdn.net/blueheart20/article/details/52384032

  3. 【334】Python Object-Oriented Programming

    Reference: Python中self用法详解 __init__ 方法: 私有变量. Reference: [290]Python 函数 class 里面的 function 创建与此一致,只是 ...

  4. varchar和Nvarchar区别(转)

    Unicode字符集就是为了解决字符集这种不兼容的问题而产生的,它所有的字符都用两个字节表示,即英文字符也是用两个字节表示 如果还为了这个纠结,就直接看看后面的解说,做决定吧. 一般如果用到中文或者其 ...

  5. css中的display(显示)和visibility(可见性)

    display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...

  6. leetcode 27 Romove element

    描述: 删除指定元素.不是真的删除,要求把不符合的元素前移. 解决: 非常简单. int removeElement(vector<int>& nums, int val) { ) ...

  7. 二叉树垂直遍历 · Binary Tree Vertical Order Traversal

    ［抄题］: 给定二叉树,返回其节点值的垂直遍历顺序. (即逐列从上到下).如果两个节点在同一行和同一列中,则顺序应 从左到右. 给定一个二叉树 {3,9,20,#,#,15,7} 3 /\ / \ 9 ...

  8. dwz监听日期变化,dwz日期控件onchange不起作用,dwz框架时间控件不支持onchange事件

    转载自:http://blog.csdn.net/sp308036654/article/details/50638348 <input type="text" class= ...

  9. Redhat安装python环境(readline模块)

    多次尝试,发现linux下安装软件: yum install readline-devel readline patch yum update python -y # 这步很重要,修复了报错 pip3 ...

  10. Effective Java 中文版

    始读于2014年8月2日10:15,整理完成于2014年8月20日23:14:42 一图一世界,<Effective Java >是Java领域大牛Joshua Bloch的获奖之作,去年 ...