<!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——音乐播放器实例的更多相关文章

  1. 博客中 Flex4/Flash mp3音乐播放器实例 含演示地址

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  2. Flex4/Flash开发在线音乐播放器 , 含演示地址

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  3. Android音乐播放器的开发实例

    本文将引导大家做一个音乐播放器,在做这个Android开发实例的过程中,能够帮助大家进一步熟悉和掌握学过的ListView和其他一些组件.为了有更好的学习效果,其中很多功能我们手动实现,例如音乐播放的 ...

  4. ES6 class——getter setter音乐播放器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  6. Android开发6：Service的使用（简单音乐播放器的实现）

    前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...

  7. 音乐播放器 EasyMusic (一)

    EasyMusic 一. 代码获取 github 上链接为 https://github.com/VincentWYJ/EasyMusic, 感兴趣的朋友可以同步下来看, 欢迎提出宝贵意见或建议. 1 ...

  8. Dewplayer 音乐播放器

    Dewplayer 是一款用于 Web 的轻量级 Flash 音乐播放器.提供有多种样式选择,支持播放列表,并可以通过 JavaScript 接口来控制播放器. 注意事项: 该播放器只支持 mp3 格 ...

  9. Android实现简单音乐播放器(MediaPlayer)

    Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能 ...

随机推荐

  1. Python Unittest简明教程

    1 概述 单元测试框架是一种软件测试方法,通过来测试源代码中的各个单元,例如类,方法等,以确定它们是否符合要求.直观上来说,可以将单元视为最小的可测试部分.单元测试是程序员在开发过程中创建的短代码片段 ...

  2. P4774-屠龙勇士-扩展中国剩余定理

    屠龙勇士 很久很久以前,巨龙突然出现,带来了灾难带走公主又消失不见.王国十分危险,世间谁最勇敢,一位英雄出现-- 学习于该大佬博客 那么你就是这位英雄,不过不同的是,你面对的是一群巨龙,虽然巨龙都不会 ...

  3. Vue框架主要内容学习总结

    Vue框架体系主要内容: 1. vue核心语法和用法: 2. vue-router--路由.路由相当于访问路径,将访问路径与vue组件映射起来.传统方式常采用超链接实现路径或页面之间的切换, 而在vu ...

  4. SQL SERVER 按时间计算每天某值的平均值

    在报表需求中,有针对求每天按时间分配数据的平均值,在经过查找后,找到一种方法,供参考. 1.新建视图 2.编写语句 SELECT  TOP (100) PERCENT AVG(dbo.漕盈日运行.CO ...

  5. 还不了解一下 Java 8 Predicate 函数接口

    同学你好,这里有一份你的未读代码,等你查收. 这篇文章属于 Java 8 教程(LTS)系列教程,点击阅读更多相关文章. Predicate 函数接口同之前介绍的 Function 接口一样,是一个函 ...

  6. uTools电脑软件快速启动工具

                    uTools电脑软件快速启动工具   http://www.autoahk.com/archives/16112   https://gitee.com/weiyunw ...

  7. 外网远程顶级域名连接群晖的WebDAV文件服务映射盘符

       外网远程顶级域名连接群晖的WebDAV文件服务映射盘符 https://www.cnblogs.com/delphixx/p/11846546.html 电子文件管理规范   1.手机拍照截屏 ...

  8. 从零开始学习JAVA（入门基础）

    目录 博主从零开始学习JAVA(入门基础) 1.搭建JAVA开发环境 卸载JDK(未安装的请忽略) 安装JDK 2.编程语言中,何为编译型与解释型 编译型 解释型 3.第一个JAVA应用程序 4.JA ...

  9. Spring Cloud Alibaba - Gateway

    Gateway Gateway简介 底层使用Netty框架,性能大于Zuul 配置gateway模块,一般使用yaml格式: server: port: 80 #spring boot actuato ...

  10. JAVA的一般输入输出 和 快速输入输出 （BufferedReader&BufferedWrite）(转载)

    1.JAVA的一般输入输出 和 快速输入输出 (BufferedReader&BufferedWrite) 摘要 本文主要介绍快速输入输出, 文中提到了几个IO类,这里推荐使用Buffered ...