文档章节

audio简单demo

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

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
博文 58
码字总数 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
0
2015年4月最新 15 个免费 jQuery 插件推荐

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

oschina
2015/04/07
8.6K
22
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
10
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
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
0

没有更多内容

加载失败,请刷新页面

加载更多

Python爬虫:Scrapy框架的安装和基本使用

大家好,本篇文章我们来看一下强大的Python爬虫框架Scrapy。Scrapy是一个使用简单,功能强大的异步爬虫框架,我们先来看看他的安装。 Scrapy的安装 Scrapy的安装是很麻烦的,对于一些想使用S...

糖宝lsh
23分钟前
2
0
Android Dialog几种对话框

1,普通对话框 2,单选对话框 3,多选对话框 4,日期选择对话框 5,时间选择对话框 6,日期选择对话框 7,进度条对话框 普通对话框 AlertDialog.Builder builder = new AlertDialog.Builde...

lanyu96
29分钟前
1
0
awk命令

-F选项的作用是指定分隔符。如果不加-F选项,则以空格或者tab为分隔符。print为打印操作,用来打印某个字段。$1为第1个字段,$2为第2个字段,以此类推。但是$0比较特殊,它表示整行: [root@cen...

野雪球
37分钟前
2
0
一切都靠大数据:滴滴已封禁4.3万人员、车辆

这段时间以来,滴滴出行相继出炉了各种整改措施,包括自身安全建设和外部社会共建,昨日就刚刚宣布正在筹备建立安全监督顾问委员会。 据媒体最新报道,9月30日,上海市交通委员会执法总队、上...

linuxCool
56分钟前
4
0
awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部