1、文件列表
2、播放界面
3、代码
<!doctype html> <html> <head> <!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--声明当前页面的三要素--> <title>音乐播放器V1版</title> <meta name="Keywords" content="关键词,关键词"> <meta name="description" content=""> <!--css,js--> <style type="text/css"> body{font-family:"微软雅黑";font-size:12px;background:#666;} .btn{text-decoration:none;font-size:14px;color:#fff;background:#dac7c0; padding:8px 12px;transition:all 0.6s ease-in;} .btn:hover{background:#999;transition:all 0.6s ease-in;} span{color:#fff;font-size:14px;} </style> </head> <body style="padding:20px;background:url('images/1.jpg')"> <a href="javascript:void(0);" onclick="tm_play()" class="btn">播放</a> <a href="javascript:void(0);" onclick="tm_stop()" class="btn">暂停</a> <span id="timer">00:00</span><span>/</span><span id="timer2">00:00</span> <script type="text/javascript"> //1.创建音乐播放器 var audio = document.createElement("audio"); //2.指定要播放的音乐 audio.src = "mp3/1.mp3"; //3.设置播放器加载成功以后执行的回调函数 audio.oncanplaythrough = function() { var totalTime = this.duration; //获取整个时长 var m = parseInt(totalTime / 60); //获取分钟 var s = parseInt(totalTime % 60); //获取秒数 var ms = (m < 10 ? ("0" + m) : m) + ":" + (s < 10 ? ("0" + s) : s); document.getElementById("timer").innerHTML = ms; } //4.监听音乐播放器的播放进度 audio.addEventListener("timeupdate",function() { var currentTime = this.currentTime; //获取当前已经播放的时长 var m = parseInt(currentTime / 60); //获取分钟 var s = parseInt(currentTime % 60); //获取秒数 var ms = (m < 10 ? ("0" + m) : m) + ":" + (s < 10 ? ("0" + s) : s); document.getElementById("timer2").innerHTML = ms; },false); //5.播放音乐 function tm_play() { audio.play(); } //6.暂停播放 function tm_stop() { audio.pause(); } </script> </body> </html>
4、重要知识点总结
var audio = document.createElement("audio");
A、获取整个音乐时长:audio.duration
B、获取当前已经播放的时长:audio.currentTime
C、播放音乐:audio.play()
D、暂停播放:audio.pause()