使用面向對象的思想實現一個簡單的音樂播放器

一、功能簡介

可以實現簡單的暫停，播放，拖動進度等簡單的操作

二、功能實現的過程

1、整體分析
我們先在index.html裏面寫基本的樣式，然後將具體的功能實現封裝在一個類裏，遇到工具類的功能的話，比如時長的轉換，就單獨分裝成一個工具類來處理。
2、樣式與佈局

*{
	margin: 0;
	padding: 0;
}
.wrap{
	width:400px;
	background-color: #aaa;
	padding: 20px;
}

.player{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.title{
	text-align: center;
	color: #FFF;
}
.btn{
	width: 7px;
	height: 7px;
	border-radius: 10px;
	background: #FFFFFF;
	position: absolute;
	top:-3px;
}

.line{
	position: relative;
	height: 2px;
	background-color: #ccc;
	margin: 0 10px;
	flex-grow: 1;
}

3、具體功能分析（使用audio的API）
（1）播放
（2）暫停
（3）拖動

class Player {
	constructor(musicNameEle, startTimeEle, alltimeEle, btnEle, audioEle) {
		this.allTime;
		this.timeNow;
		this.musicName;
		this.src;
		this.status = false;
		this.divWidth = btnEle.parentElement.offsetWidth;
		this.musicNameEle = musicNameEle;
		this.startTimeEle = startTimeEle;
		this.alltimeEle = alltimeEle;
		this.btnEle = btnEle;
		this.audioEle = audioEle;
		this.isBtnClick = false;
		this.startPoint; //初次觸發值
		this.startPercent;

		this.btnEle.onmousedown = (e) => {
			this.startPercent = this.timeNow / this.allTime
			this.startPoint = e.screenX;
			this.isBtnClick = true;
		}

		document.body.onmousemove = (e) => {
			if (!this.isBtnClick) {
				return
			}
			let endPoint = e.screenX;
			let lastPercent = this.startPercent + (endPoint - this.startPoint) / this.divWidth;
			if (lastPercent < 0) {
				lastPercent = 0
			} else if (lastPercent > 1) {
				lastPercent = 1
			}
			this.timeNow = this.allTime*lastPercent;
			this.startTimeEle.innerHTML = UtilObj.changeTime(this.timeNow);
			this.btnEle.setAttribute("style", `left:${lastPercent*100}%`)
		}

		document.body.onmouseup = (e) => {
			if (!this.isBtnClick) {
				return
			}
			this.isBtnClick = false;
			let endPoint = e.screenX;
			let lastPercent = this.startPercent + (endPoint - this.startPoint) / this.divWidth;
			if (lastPercent < 0) {
				lastPercent = 0
			} else if (lastPercent > 1) {
				lastPercent = 1
			}
			this.audioEle.currentTime = this.allTime*lastPercent;
		}

		this.audioEle.onloadeddata = () => {
			this.allTime = this.audioEle.duration;
			this.alltimeEle.innerHTML = UtilObj.changeTime(this.allTime);
			this.timeNow=0;
		}

		this.audioEle.ontimeupdate = () => {
			if (this.isBtnClick) {
				return
			}
			this.timeNow = this.audioEle.currentTime;
			this.startTimeEle.innerHTML = UtilObj.changeTime(this.timeNow);
			this.btnEle.setAttribute("style", `left:${this.timeNow/this.allTime*100}%`)
		}

		this.musicNameEle.onclick = () => {
			if (!this.status) {
				this.play()
			} else {
				this.pause()
			}
		}
	}

	play() {
		this.audioEle.play();
		this.status = true;
	}

	pause() {
		this.audioEle.pause();
		this.status = false;
	}
	//這裏可以拓展一個列表切換的功能
	playerSet(src, musicName) {
		this.musicName = musicName;
		this.musicNameEle.innerHTML = musicName;
		this.src = src;
		this.audioEle.setAttribute("src", src);
	}

	getplayNowName() {
		return this.musicName;
	}
}

引入的部分

以後要多多使用封裝類的思想來實現具體的功能！！！！