ES6 class——音乐播放器实例 

<!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>

 

posted @ 2020-09-14 00:05  是桂  阅读(312)  评论(0)    收藏  举报