video audio 的点击事件
<style>.container {width: 400px;border: 1px solid #ddd;text-align: center;padding-bottom: 10px;}.container p{font-size: 1.3em;font-weight: bold;text-align: center;}...
<style>
.container {
width: 400px;
border: 1px solid #ddd;
text-align: center;
padding-bottom: 10px;
}
.container p{
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.container img{
width: 340px;
height: 340px;
border-radius: 50%;
}
.container input{
width: 340px;
display: block;
margin: 10px auto;
}
.container .time{
width: 340px;
height: 30px;
margin: 0px auto;
}
.container .time .left{
float: left;
}
.container .time .right{
float: right;
}
</style>
<body>
<div class="container">
<p>let it go</p>
<img src="assets/logo.jpg" alt="">
<input id="range" type="range" min="0" value="0" max="100">
<div class="time">
<span class="left">00:00</span>
<span class="right">03:15</span>
</div>
<button id="btn_play">播放/暂停</button>
<button id="btn_vp">音量+</button>
<button id="btn_vm">音量-</button>
<button id="btn_05">0.5倍速</button>
<button id="btn_1">1倍速</button>
<button id="btn_2">2倍速</button>
</div>
<script src="./assets/moment.js"></script>
<script>
let btn_play= document.getElementById('btn_play')
let player = new Audio() //创建一个播放器
player.src='./assets/let_it_go.mp3'
// 刷新显示总时长
player.addEventListener('loadedmetadata',function () {
let dt = player.duration //总时长
let dtstr = moment.unix(dt).format('mm:ss')
let rightSpan = document.getElementsByClassName('right')[0]
rightSpan.innerHTML=dtstr
})
// 更新进度
player.addEventListener("timeupdate",function(){
let ct = player.currentTime //当前时长
let dt = player.duration //总时长
// 点击更新播放进度
range.addEventListener('change',function(){
console.log(range.value);
player.currentTime=range.value
})
// 更新进度条
range.max= dt
range.value = ct
// 更新时间 当前时间与总时长
let ctstr = moment.unix(ct).format('mm:ss')
let dtstr = moment.unix(dt).format('mm:ss')
console.log(`timeupdate() ct:${ctstr} dt:${dtstr}`);
let leftSpan = document.getElementsByClassName('left')[0]
let rightSpan = document.getElementsByClassName('right')[0]
leftSpan.innerHTML=ctstr
rightSpan.innerHTML=dtstr
})
// 倍速播放
btn_05.addEventListener('click',function(){
player.playbackRate=0.5
})
btn_1.addEventListener('click',function(){
player.playbackRate=1
})
btn_2.addEventListener('click',function(){
player.playbackRate=2
})
// 控制音量
btn_vp.addEventListener('click',function(){
//不高于1
player.volume=Math.min(player.volume+0.1,1)
console.log(player.volume);
})
// 控制音量
btn_vm.addEventListener('click',function(){
//不低于0
player.volume=Math.max(player.volume-0.1,0)
console.log(player.volume);
})
// 暂停与播放
btn_play.addEventListener('click',function(){
if(player.paused){
player.play()
}else{
player.pause()
}
})
</script>
</body>
一站式 AI 云服务平台
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)