文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
35分钟前
1
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
53分钟前
13
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
54分钟前
1
0
Confluence 6 文档主题合并问答

在 Confluence 官方 前期发布的消息 中,文档主题在 Confluence 6.0 及其后续版本中已经不可用。我们知道你可能对这个有很多好好奇的问题,因此我们在这里设置了一个问答用于帮助你将这个主题...

honeymose
今天
2
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部