<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟一个音乐播放器</title>
</head>
<body>
<div id="app"></div>
<script>
class AudioPlayer{
//从无到有生成一个音乐播放器,并且获取歌单列表等等
constructor(container){ //生成完的播放器插入到container元素中
this.container = document.querySelector(container)
this.songList = [];
this.dom = null; //播放器dom元素
this.audio = new Audio(); //Audio对象,用于播放音频,可以读取音频资源
//类在实例化的时候,this会指向实例化对象.实例化对象会继承类中定义的方法 和属性,所以在一个方法中,是可以通过this调用另一个方法的,这相当于实例化对象调用了自己的方法.
//读取歌单列表
this.getSongs();
//创建dom对象
this.createElement();
//绑定事件
this.bindEvents();
//渲染dom到页面
this.render();
}
getSongs(){
//...ajax...
this.songsList = [
{
cover:'',
url:'.mp3',
singer:{},
name:''
}
];
}
createElement(){
//生成dom
const div = document.createElement('div')
div.innerHTML = `
<div class="btn">播放按钮</div>
<div>进度条</div>
`;
this.dom = div;
}
bindEvents(){
this.dom.querySelector('.btn').addEventListener('click',() => {
console.log('开始播放');
})
}
render(){
this.container.appendChild(this.dom);
}
}
new AudioPlayer('#app')
</script>
</body>
</html>