lovecoding
/
vipAllDay


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        audio 音频 
        video 视频
        1.src 路径
        2.controls 控件
        3.loop 循环播放
        4. 当前播放的时间：
            dom.currentTime	
            指示音频/视频播放的当前时间(以秒计);
        5.playbackRate	
            设置或返回音频/视频播放的速度
            注意：
                1. 设置播放的速度,1--16最大16倍速;
        6.dom.duration	
            返回当前音频/视频的长度（以秒计）
        7.ended	返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
        8.muted	设置或返回音频/视频是否静音
        9.paused返回音频/视频是否暂停
        10.volume设置或返回音频/视频的音量 0-1

        方法
        1.load()	重新加载音频/视频元素
        2.play()	开始播放音频/视频
        3.pause()	暂停当前播放的音频/视频

        事件：
        canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
        timeupdate	(播放进度改变的时候触发);  正在播放的事件
        ended	 当目前的播放列表已结束时 当播放结束的是


     -->
     <audio src="./周杰伦-花海.mp3" controls></audio>
     <!-- <video src="./222.mp4" controls></video> -->
     <button class="btn1">播放</button>
     <button class="btn2">暂停</button>
     <button class="btn3">重新加载</button>
     <script>
        var a1 = document.querySelector("audio");
        var btn1 = document.querySelector(".btn1");
        var btn2 = document.querySelector(".btn2");
        var btn3 = document.querySelector(".btn3");
        a1.muted = false;
        a1.volume = 0.6;
        console.log(a1.volume)
        setInterval(()=>{
            console.log(a1.ended);
        // console.log(a1.duration);
            // console.log(a1.currentTime);
        },1000)
        btn1.addEventListener("click",function(){
            console.log("开始")
            a1.play();
        })
        btn2.addEventListener("click",function(){
            console.log("暂停")
            a1.pause();
        })
        btn3.addEventListener("click",function(){
            console.log("重新加载")
            a1.load();
        })
        a1.addEventListener("canplaythrough",function(){
            console.log("资源加载完成")
        })
        a1.addEventListener("ended",function(){
            console.log("播放结束")
        })
        a1.addEventListener("timeupdate",function(){
            console.log("正在播放")
        })
        
        // a1.playbackRate = 16;
     </script>
</body>
</html>