audio简单demo

2019独角兽企业重金招聘Python工程师标准>>>

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;
        }

    })

转载于:https://my.oschina.net/niejianbo/blog/699488