Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
62 lines (62 sloc) 2.05 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
<style>
audio{
width: 400px;
height:40px;
}
#progress{
width: 100%;
height: 10px;
}
</style>
</head>
<body>
<audio id="myVideo" src="http://m10.music.126.net/20180418120451/8bd409e11b5d4e387ac0c257d872d8a1/ymusic/2b72/ddb6/3c36/cec43904bcc73074674bee41bc301c6a.mp3" controls loop poster="http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d13b161359e3df8dcd00054b4.jpg">
你的浏览器不支持audio
</audio>
<div>
<input type="button" value="播放/暂停" id="play_pause"/>
<input type="button" value="前进15s" id="move_15s"/>
<input type="button" value="2倍速" id="speed_up"/>
<input type="button" value="降音量" id="noise_down"/>
<input type="button" value="静音" id="no_noise"/>
<input type="button" value="全屏" id="full_screen"/>
</div>
<div id="progress"></div>
</body>
<script>
var audio = document.getElementById('myVideo');
var btn1 = document.getElementById('play_pause');
var btn2 = document.getElementById('speed_up');
var btn3 = document.getElementById('noise_down');
var btn4 = document.getElementById('no_noise');
var btn5 = document.getElementById('full_screen');
var btn6 = document.getElementById('move_15s');
var progress = document.getElementById('progress');
audio.addEventListener('timeupdate',function(){
progress.style.background = 'linear-gradient(to right,#999 '+(audio.currentTime/audio.duration)*100+'%,#fff 0)';
},false)
btn1.onclick = function(){
audio.paused?audio.play():audio.pause();
}
btn2.onclick = function(){
audio.playbackRate = 2;
}
btn3.onclick=function(){
audio.volume -= audio.volume-.1>=0?.1:0;
}
btn4.onclick=function(){
audio.muted = !audio.muted;
}
btn5.onclick = function(){
audio.webkitRequestFullScreen();
}
btn6.onclick = function(){
audio.currentTime += 15;
}
</script>
</html>
You can’t perform that action at this time.