<!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. MySQL中的redo log和undo log

    MySQL中的redo log和undo log MySQL日志系统中最重要的日志为重做日志redo log和归档日志bin log,后者为MySQL Server层的日志,前者为InnoDB存储引擎 ...

  2. 上手Coc.nvim 完全指南

    上手Coc.nvim 完全指南 介绍 Coc.nvim 是一个基于NodeJS 的适用于Vim8, Neovim 的Vim 智能补全插件. 拥有完整的LSP 支持.配置.使用方式及插件系统的整体风格类 ...

  3. windows 查看端口号，关闭端口进程

    1.打开cmd,输入:netstat -ano | findstr 8080,根据端口号查找对应的PID.结果如下: 2.根据PID找进程名称,输入命令:tasklist | findstr 1789 ...

  4. 在LinuxMint 17 MATE中安装NVIDIA显卡驱动

    第一步:在Linux系统中安装Nvidia显卡驱动需要关闭X Server. 打开终端,进入ROOT权限,执行以下命令 $ sudo service mdm stop 此时将会把X Server关闭, ...

  5. python 处理protobuf 接口常见错误

    python 处理protobuf 接口常见错误 1.问题 : Assignment not allowed to repeated field '> http://www.coin163.co ...

  6. ASP.NET使用递归算法实现画树程序

    实现效果如下:(随机生成) using System; using System.Collections.Generic; using System.ComponentModel; using Sys ...

  7. 杭电OJ 输入输出练习汇总

    主题 Calculate a + b 杭电OJ-1000 Input Each line will contain two integers A and B. Process to end of fi ...

  8. alpakka-kafka(6)-kafka应用案例，用户接口

    了解了kafka原理之后,对kafka的的应用场景有了一些想法.在下面的一系列讨论中把最近一个项目中关于kafka的应用介绍一下. 先介绍一下使用kafka的起因:任何进销存系统,销售开单部分都应该算 ...

  9. 数据库之 MySQL

    MySQL简单入门 数据库这个概念想必大家都听说过,我在这里也简单介绍一下. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个或多个不同的 API 用于创建,访 ...

  10. 音视频开发之H.264 入门知识

    大家如果有做过音视频相关的项目,那么肯定对 H.264 相关的概念了解的比较通透,这里我为什么还要写这样一篇文章呢?一来是为了对知识的总结,二来是为了给刚入门音视频的同学一个参考. 基础概念 H.26 ...