文档章节

audio简单demo

-波仔-
 -波仔-
发布于 2016/06/22 20:17
字数 288
阅读 22
收藏 2
点赞 0
评论 0

1.引入 jquery 

<script src="lib/jquery2.1.js" type="text/javascript"></script>

2.html

<div class="audio">
    <span class="getCurrentTime">获取播放时间</span>
    <span class="playOrPaused">播放</span>
    <span class="hideOrShowControls">隐藏控制框</span>
    <span class="muted">开启静音</span>
    <input type="button" value="+" id="upVol"/>音量<input type="button" value="-"  id="downVol"/>
    <audio src="2.wav" id="audio" controls="controls" ></audio>
    <span  id="nowVol"> - </span>
</div>

3.css
        span{
            font-size: 1rem;
            padding:2px 5px;
            border:1px solid #000;
            border-radius: 10%;
            text-align: center;
            color: #000;
        }
4.js

    $(document).ready(function(){
        var audio ;
        initAudio();
        function initAudio(){
            audio = document.getElementById('audio');
            $('.getCurrentTime').click(function(){
                getCurrentTime('firefox');
            })
            $('.playOrPaused').click(function(){
                playOrPaused('firefox',this);
            })
            $('.hideOrShowControls').click(function(){
                hideOrShowControls('firefox',this);
            })
            $('.muted').click(function(){
                muted('firefox',this);
            })
            $('#upVol').click(function(){
                vol('firefox' , 'up' , this )
            })
            $('#downVol').click(function(){
                vol('firefox' , 'down' , this )
            })
            $('#nowVol').click(function(){
                vol('firefox' , 'down' , this )
            })
        }
        function getCurrentTime(id){
            alert(parseInt(audio.currentTime) + ':秒');
        }

        function playOrPaused(id,obj){
            if(audio.paused){
                audio.play();
                obj.innerHTML='暂停';
                return;
            }
            audio.pause();
            obj.innerHTML='播放';
        }

        function hideOrShowControls(id,obj){
            if(audio.controls){
                audio.removeAttribute('controls');
                obj.innerHTML = '显示控制框'
                return;
            }
            audio.controls = 'controls';
            obj.innerHTML = '隐藏控制框'
            return;
        }
        function vol(id,type , obj){
            if(type == 'up'){
                var volume = audio.volume  + 0.1;
                if(volume >=1 ){
                    volume = 1 ;

                }
                audio.volume =  volume;
            }else if(type == 'down'){
                var volume = audio.volume  - 0.1;
                if(volume <=0 ){
                    volume = 0 ;
                }
                audio.volume =  volume;
            }
            $('#nowVol').text(returnFloat1(audio.volume));
        }
        function muted(id,obj){
            if(audio.muted){
                audio.muted = false;
                obj.innerHTML = '开启静音';
            }else{
                audio.muted = true;
                obj.innerHTML = '关闭静音';
            }
        }
        //保留一位小数点

        function returnFloat1(value) {
            value = Math.round(parseFloat(value) * 10) / 10;
            if (value.toString().indexOf(".") < 0){
                value = value.toString() + ".0";
            }
            return value;
        }

    })

© 著作权归作者所有

共有 人打赏支持
-波仔-
粉丝 5
博文 54
码字总数 48482
作品 0
杭州
程序员
Audio Unit播放PCM文件

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使用AudioToolbox播放AAC HLS点播实现(H.264和AAC码流) HLS推流的实现(iOS和OS X系统...

落影loyinglin ⋅ 2017/09/17 ⋅ 0

2015年4月最新 15 个免费 jQuery 插件推荐

我们为您收集了15个免费的 jQuery 插件,助力你的项目设计。jQuery 插件一直在更新发布,因此它十分受人喜爱,开发者所要考虑的就是在众多插件中寻找最好的那个。这就是为什么我们写这篇文章...

oschina ⋅ 2015/04/07 ⋅ 22

使用 JAVE 对音视频转码

JAVE 官方的jar包带了ffmpeg的exe程序,所以在windows上可以直接使用,但是如果要在Linux上用就得先把ffmpeg的环境装好。 官方的jar包在这里下载:http://www.sauronsoftware.it/projects/j...

walala_Lee ⋅ 2015/05/24 ⋅ 0

audio简单demo2

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> <link rel="shortcut icon" hre......

-波仔- ⋅ 2016/06/23 ⋅ 0

Audio Unit和ExtendedAudioFile播放音频

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使用AudioToolbox播放AAC HLS点播实现(H.264和AAC码流) HLS推流的实现(iOS和OS X系统...

落影loyinglin ⋅ 2017/10/25 ⋅ 0

Audio Unit播放aac/m4a/mp3等文件

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使用AudioToolbox播放AAC HLS点播实现(H.264和AAC码流) HLS推流的实现(iOS和OS X系统...

落影loyinglin ⋅ 2017/10/09 ⋅ 0

HTML5 之美:推荐9款优秀的 HTML5 音乐播放器

过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash、QuickTime 和 Silverlight 等,没有统一的音频播放标准。HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法,下面这9款...

未来十年 ⋅ 2012/09/29 ⋅ 0

35 个高级但使用简单的 jQuery 插件

Subway Map Visualization jQuery Plugin Download | Demo jquery-toastmessage-plugin Download | Demo Gmap Google Maps Plugin for jQuery Download | Demo Recurly.js Download | Demo 9......

红薯 ⋅ 2012/02/02 ⋅ 9

9 个很有用的 jQuery Mobile 教程(英文)

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery ...

红薯 ⋅ 2011/04/27 ⋅ 0

学习HTML5音频录制

之前玩过WebRTC,通过HTML5可以轻松实现语音视频聊天,网上的示例很多。最近想了解下HTML5能否录制音频,用什么接口可以做到。这里分享下学习资料。 浏览器 要获取音频和视频,需要用到getUs...

yushulx ⋅ 2016/10/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win环境下jdk7与jdk8共存配置

1.jdk安装包 jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe、javaw.exe、javaws.exe三个文件copy到了C:\Windows\System32,这...

泉天下 ⋅ 16分钟前 ⋅ 0

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 50分钟前 ⋅ 0

python3中报错的解决方法(长期更新)

1、ImportError: No module named ‘DjangoUeditor’ 出错原因:安装DjangoUeditor库适用于python2,需要下载适用python3的 下载地址:https://github.com/twz915/DjangoUeditor3 2、python3......

xiaoge2016 ⋅ 55分钟前 ⋅ 0

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 今天 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 今天 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 今天 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html AOP系列(一)——ProxyFactoryObject 显式创......

whoisliang ⋅ 今天 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 今天 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 今天 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部