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>
巴特西

ES6 class——音乐播放器实例

最新文章

热门文章
