音乐播放器V1.0版
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()