lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!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:显示控件：
                    属性值 ：controls 
        3. 是否循环播放：
                    属性名：loop;
                    属性值：loop;
        4.视频当前播放的时间：
                    dom.currentTime	
                    指示音频/视频播放的当前时间(以秒计);
        5.playbackRate	
            设置或返回音频/视频播放的速度
            注意：
                设置播放的速度,1--16最大16倍速;
        6.dom.duration	
            返回当前音频/视频的长度（以秒计）
        7.ended	
            返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
        8.muted	
            设置或返回音频/视频是否静音 布尔值
        9.paused
            返回音频/视频是否暂停 布尔值
        10.volume
            设置或返回音频/视频的音量

        方法：
            1.load()	重新加载音频/视频元素
            2.play()	开始播放音频/视频
            3.pause()	暂停当前播放的音频/视频
        事件:
            canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
            timeupdate	(播放进度改变的时候触发);  正在播放的事件
            ended 当目前的播放列表已结束时 当播放结束的是

    -->
    <audio src="./周杰伦-花海.mp3" controls ></audio>
    <button id="btn1">播放</button>
    <button id="btn2">暂停</button>
    <button id="btn3">加载</button>
    <!-- <video src="./222.mp4" controls></video> -->
    <script>
        const audio = document.querySelector("audio");
        const btn1 = document.getElementById("btn1");
        const btn2 = document.getElementById("btn2");
        const btn3 = document.getElementById("btn3");
        btn1.onclick = function () {
            audio.play();
        }
        btn2.onclick = function () {
            audio.pause();
        }
        btn3.onclick = function () {
            audio.load();
        }
        audio.addEventListener('canplaythrough',function() {
            console.log("11")
        })
        audio.addEventListener('timeupdate',function() {
            console.log("22")
        })
        audio.addEventListener('ended',function() {
            console.log("33")
        })
        // audio.volume = 20
        // audio.playbackRate = 0.5;
        // audio.volume = 0.4
        // setInterval(()=>{
        //     console.log(audio.volume)
        //     // console.log(audio.currentTime)
        //     // console.log(audio.ended)
        // // console.log(audio.duration)
        // },1000)
        // audio.muted = true;
    </script>
</body>

</html>