js+audio实现音乐播放器

63 阅读 0 评论 42 点赞

我是靠谱客的博主纯真羊，最近开发中收集的这篇文章主要介绍js+audio实现音乐播放器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>音乐播放器</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/>
		<link rel="stylesheet" type="text/css" href="css/music_Play.css" />
	</head>

	<body>
		<div class="music_bg">
			<div class="music_cont">
				<audio id="audio1" src=""></audio>
				<div class="music_ctrl">
					<div class="music_btn">
						<div class="btn prev">
							<img id="prev" src="img/prev.png" />
						</div>
						<div class="btn play">
							<img id="play" src="img/pause.png" />
						</div>
						<div class="btn next">
							<img id="next" src="img/next.png" />
						</div>
					</div>
					<div class="music_name" id="music_name"></div>
				</div>
				<div class="music_line">
					<div class="line1" id="line1"></div>
					<div class="line2" id="line2"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/audio_play.js" type="text/javascript" charset="utf-8"></script>
</html>

* {
	margin: 0;
	padding: 0;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

body {
	overflow-x: hidden;
}

.music_bg {
	width: 100%;
	height: 666px;
	position: absolute;
	background-image: url(../img/bj.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.music_cont {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	background-color: #000;
	border-radius: 10px;
	box-shadow: #000000 5px 5px 30px 5px
}

.music_line {
	width: 300px;
	height: 20px;
	overflow: hidden;
	position: absolute;
	top: 30%;
}

.line1 {
	width: 0%;
	height: 60%;
	float: left;
	margin-top: 1%;
	margin-right: -2px;
	background-color: rgba(255, 255, 255, 0.9);
}

.line2 {
	background-image: url(../img/point.png);
	height: 100%;
	background-repeat: no-repeat;
	width: 10px;
	background-position: center;
	float: left;
	cursor: pointer;
	margin-left: -4px;
	margin-right: -4px;
}

.music_ctrl {
	width: 300px;
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #8c3232;
}

.music_btn {
	width: 300px;
	height: 100px;
	position: relative;
}

.btn {
	width: 33.33%;
	float: left;
	height: 40px;
	margin-top: 50px;
}

.prev img {
	float: right;
	margin: 10px 0px;
	cursor: pointer;
}

.play img {
	margin: 2px 35px;
	cursor: pointer;
}

.next img {
	float: left;
	margin: 10px 0px;
	cursor: pointer;
}

.music_name {
	width: 300px;
	height: 100px;
	position: relative;
	text-align: center;
	line-height: 100px;
	color: #fff;
	font-size: 18px;
}

// 定义索引和定时器
var index = 0,
	timer = null;
// 获取到要操作的对象
var prev = document.getElementById("prev");
var play = document.getElementById("play");
var next = document.getElementById("next");
var audio1 = document.getElementById("audio1");
var music_name = document.getElementById("music_name");
var line1 = document.getElementById("line1");
var line2 = document.getElementById("line2");
// 定义数组存音频相关资料
var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];
var music_title = ["白举纲-绅士（live）", "魔鬼中的天使", "下个路口见", "大鱼"];
// 进行初始化音频
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
// 按钮是点击事件
play.onclick = function() {
	move1(); // 播放或暂停
};
prev.onclick = function() {
	prev1(); // 上一曲，播放
	move1();
}
next.onclick = function() {
		next1(); // 下一曲，播放
		move1();
	}

	// 下一曲的函数
var next1 = function() { // 索引+1，初始化改变后的音乐播放界面
		if (index == music_src.length - 1) {
			index = 0;
		} else {
			index++;
		}
		audio1.src = "audio/" + music_src[index];
		music_name.innerText = music_title[index];
	}
	// 上一曲的函数
var prev1 = function() { // 索引-1，初始化改变后的音乐播放界面
		if (index == 0) {
			index = music_src.length - 1;
		} else {
			index--;
		}
		audio1.src = "audio/" + music_src[index];
		music_name.innerText = music_title[index];
	}
	// 暂停与播放的函数
var move1 = function() {
		// 判断现在是不是在播放
		if (audio1.paused) { // 没有，播放音乐，改变按钮样式，改变进度条
			audio1.play();
			play.src = "img/play.png";
			timer = setInterval(function() { // 每500毫秒执行一次
			var drtTime = audio1.duration; // 得到音频总时间（如果不放在定时器中会出现下一曲，暂停播放，进度条来回跳动）
				var curTime = audio1.currentTime; // 获取音频当前播放时间
				line1.style.width = (curTime / drtTime) * 100 + "%"; // 计算出进度条的长度
				if (drtTime==curTime) {
					next.onclick();
				}
				console.log(drtTime,curTime);
			}, 500);
		} else { // 播放，关闭音乐，关闭按钮图标
			audio1.pause();
			play.src = "img/pause.png";
			clearInterval(timer);
		}
	}
	// 拖动进度条改变播放进度
var flag = false; // 标记
var mx = null; // 距离
line2.onmousedown = function(event) {
	// 改变状态
	flag = true;
	// 按下鼠标获取距离
	mx = event.pageX - line2.offsetLeft;
	clearInterval(timer);
}
document.body.onmousemove = function(event) {
		// 当状态为true时可以获取
		if (flag) {
			// 滑块的位置=当前鼠标位置-距离
			var x1 = event.pageX - mx;
			// 进度条当前长度=滑块位置-进度条的开始坐标值
			var x2 = x1 - line1.offsetLeft;
			// 用进度条当前长度/进度条总长度得到一个小数
			var x3 = x2 / 295;
			// 取到小数点后3位
			var x4 = x3.toFixed(3);
			if (x4 >= 0 && x4 < 1) {
				// 当百分比在0--1之间时才改变进度条长度
				line1.style.width = x4 * 100 + "%";
			}else if (x4 == 1) {
				next.onclick();
			}
		}
	}
	// 放开鼠标时，状态改变，当前播放时间改变，启动定时器继续工作
document.body.onmouseup = function(event) {
	flag = false; // 状态改变
	var x5 = parseInt(line1.style.width) / 100; // 得到当前进度条的百分比
	var drtTime = audio1.duration; // 得到音频总时间
	audio1.currentTime = (drtTime * x5).toFixed(0); // 改变当前播放时间
	timer = setInterval(function() { // 定时器重启成功
		var curTime = audio1.currentTime;
		line1.style.width = (curTime / drtTime) * 100 + "%";
	}, 500);
}