音乐播放器V1.0版 -

lipiaoshui2015

浏览: 107752 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

音乐播放器V1.0版

博客分类：

javascript

音乐播放器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()