音频1 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <audio src="img/gaobaiqiqiu.mp3" controls="controls" ></audio>
        <!--<video width="800"  src="img/shiping.mp4"  controls="controls"></video>-->
        
        <!--<video src="img/shiping.mp4" controls="controls" width="600" height="" autoplay="autoplay" >
            -->
        <!--</video>
        -->-->
        <button class='fuge'>副歌</button>
        
        
        <button class="play">播放/暂停</button>
        
        <button class="muted">静音/不静音</button>
        
        <button class="sound">声音</button>
        
        <script type="text/javascript">
            var a1 = document.querySelector('audio')
            //保证用户体验，要跟用户交互才能调用此功能
            a1.autoplay = true;
//            a1.muted = true;
            
            document.querySelector('.play').onclick = function(){
                
                if(a1.paused){
                    a1.play()
                }else{
                    a1.pause()
                }
                
            }
            
            document.querySelector('.fuge').onclick = function(){
                a1.currentTime = 70
                a1.play()
            }
            
            document.querySelector('.muted').onclick = function(){
//                a1.muted = true
                if(a1.muted){
                    a1.muted = false
                }else{
                    a1.muted = true
                }
            }
            
            document.querySelector('.sound').onclick = function(){
            
            if(a1.volume > 0.8){
                a1.volume = 0.5
                }else{
                a1.volume = 0.2
                }
            }
            
            
            
        </script>
    </body>
</html>

 

posted @ 2019-03-18 21:56  就这样子吧  阅读(218)  评论(0)    收藏  举报