自定义播放器
自定义播放器
自定义播放器的练习就是对事件的练习。
<html> <head> <meta charset="utf-8"> <title>自定义播放器</title> <style> .progress{
height: 30px; border: 2px solid darkblue; } .progress>.bar{
height: 100%; background-color: aliceblue; } </style> </head> <body> <!-- controls控件 --> <!-- loop 循环 --> <!-- autoplay 自动播放--> <!-- muted 静音 --> <!-- <audio src="../audio/spirit.mp3" controls></audio> --> <div id="music"> <button>play</button> <button>pause</button> <button>stop</button><br /> <button>+</button> <button>-</button> <button>replay</button> <button>>></button> <button> << </button> <br/> <input id="range" type="range" min="0" max="50"/> </div> <div class="progress" style="width: 400px;"> <div class="bar" style="width: 0px;"></div> <div class="b">1</div> </div> </body> <script> var audio=new Audio("../audio/Theme.mp3"); var btn=document.getElementsByTagName("button"); var rang=document.getElementById("range"); var min=rang.getAttribute("min"); var max=rang.getAttribute("max"); var num=parseInt(max)-parseInt(min); var n=10; var bar=document.querySelector(".bar"); var pro=document.querySelector(".progress"); var b=document.querySelector(".b"); // 文件就绪 audio.addEventListener("canplaythrough",function(){
audio.volume=0.5; console.log(audio.duration); // audio.duration; // 当前时间; audio.currentTime; }); audio.addEventListener("timeupdate",show); function show(){
bar.style.width=(audio.currentTime/audio.duration)*100+"%"; b.innerText=(audio.currentTime)+"秒"; } btn[0].onclick=function(){
audio.play(); } btn[1].onclick=function(){
audio.pause(); } btn[2].onclick=function(){
audio.currentTime=0; audio.pause(); } btn[3].onclick=function(){
if(audio.volume<0.){
var x=audio.volume; audio.volume=audio.volume+0.1; rang.value=(audio.volume)*50; }else{
audio.volume=1; rang.value=50; } } btn[4].onclick=function(){
if(audio.volume>0.0001){
var x=audio.volume; audio.volume=audio.volume-0.1; rang.value=(audio.volume)*50; }else{
audio.volume=0; rang.value=0; } } btn[5].onclick=function(){
audio.currentTime=0; audio.play(); } btn[6].onclick=function(){
audio.currentTime=audio.currentTime+n; } btn[7].onclick=function(){
audio.currentTime=audio.currentTime-n; } rang.oninput=function(){
audio.volume=this.value/num; } pro.onclick = function (e){
var proWidth=parseInt( pro.style.width) ; var cur=e.offsetX; var bz=(cur/proWidth); bar.style.width=bz*100+"%"; audio.currentTime=bz*audio.duration; } </script> </html> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/219864.html原文链接：https://javaforall.net
