<!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. VB.Net条形码编程的方法

    一.条形码的读取用过键盘口式的扫条码工具的朋友就知道,它就如同在鍵盘上按下数字鍵一样,基本不需任何编程和处理.但如果你使用的是其它接口的话,可能你就要为该设备编写通讯代码了.以下有一段简单的25针串口 ...

  2. Linux 文件管理命令语法、参数、实例全汇总（一）

    命令:cat   cat 命令用于连接文件并打印到标准输出设备上. 使用权限 所有使用者 语法格式 cat [-AbeEnstTuv] [--help] [--version] fileName 参数 ...

  3. linux vim操作技巧

    安装: NERDTree 从 http://www.vim.org/scripts/script.php?script_id=1658  下载 unzip NERD_tree.zip cd ~/.vi ...

  4. Cocoa Touch（六）：App运行机制 NSRunLoop, KVC, KVO, Notification, ARC

    事件循环NSRunLoop 1.run loop概念 NSRunLoop类封装了线程进入事件循环的过程,一个runloop实例就表示了一个线程的事件循环.更具体的说,在iOS开发框架中,线程每次执行完 ...

  5. redis持久化详解

    一.RDB持久化 RDB 持久化 可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). 优点:快速持久化.占用磁盘空间少.适合于用做备份,主从复制也是基于RD ...

  6. Common issue on financial information exchange (FIX) Connectivity[z]

    FIX Protocol Session Connectivity Hi guys, in this post I would like share my experience with financ ...

  7. 第七章 资源在Windows编程中的应用 P157 7-8

    资源在基于SDK的程序设计中的应用实验 一.实验目的 1．掌握各种资源的应用及资源应用的程序设计方法.   二.实验内容及步骤 实验任务 1.熟悉菜单资源的创建过程: 2.熟悉位图资源的创建: 3.熟 ...

  8. hra 直线

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  9. C语言条件编译及编译预处理阶段（转）

    一.C语言由源代码生成的各阶段如下: C源程序->编译预处理->编译->优化程序->汇编程序->链接程序->可执行文件 其中 编译预处理阶段,读取c源程序,对其中的 ...

  10. 安装及运行 RabbitMQ 服务器 （linux） 失败！ 安装erlang 失败，无法继续

    文档 http://www.rabbitmq.com/install-rpm.html 安装前置条件 Before installing RabbitMQ, you must install Erla ...