使用面向对象的思想实现一个简单的音乐播放器

太过爱你忘了你带给我的痛 2023-07-23 04:58 9阅读 0赞

##### 一、功能简介 #####

可以实现简单的暂停，播放，拖动进度等简单的操作

##### 二、功能实现的过程 #####

1、整体分析  
我们先在index.html里面写基本的样式，然后将具体的功能实现封装在一个类里，遇到工具类的功能的话，比如时长的转换，就单独分装成一个工具类来处理。  
2、样式与布局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]

*{ 
    	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;
    	}
    }

引入的部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 1]

以后要多多使用封装类的思想来实现具体的功能！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: /images/20230528/40df577a53824732a1fe5941be1b260e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 1]: /images/20230528/e9dde8a2f4e84f46848c74001c197491.png