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——音乐播放器实例的更多相关文章
- 博客中 Flex4/Flash mp3音乐播放器实例 含演示地址
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- Flex4/Flash开发在线音乐播放器 , 含演示地址
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- Android音乐播放器的开发实例
本文将引导大家做一个音乐播放器,在做这个Android开发实例的过程中,能够帮助大家进一步熟悉和掌握学过的ListView和其他一些组件.为了有更好的学习效果,其中很多功能我们手动实现,例如音乐播放的 ...
- ES6 class——getter setter音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
- Android开发6：Service的使用（简单音乐播放器的实现）
前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...
- 音乐播放器 EasyMusic (一)
EasyMusic 一. 代码获取 github 上链接为 https://github.com/VincentWYJ/EasyMusic, 感兴趣的朋友可以同步下来看, 欢迎提出宝贵意见或建议. 1 ...
- Dewplayer 音乐播放器
Dewplayer 是一款用于 Web 的轻量级 Flash 音乐播放器.提供有多种样式选择,支持播放列表,并可以通过 JavaScript 接口来控制播放器. 注意事项: 该播放器只支持 mp3 格 ...
- Android实现简单音乐播放器(MediaPlayer)
Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能 ...
随机推荐
- 啥是 MySQL 事务隔离级别？
之前发过一篇文章,简单了解 MySQL 中相关的锁,里面提到了,如果我们使用的 MySQL 存储引擎为 InnoDB ,并且其事务隔离级别是 RR 可重复读的话,是可以避免幻读的. 但是没想到,都 1 ...
- PAT乙级：1063 计算谱半径 (20分)
PAT乙级:1063 计算谱半径 (20分) 题干 在数学中,矩阵的"谱半径"是指其特征值的模集合的上确界.换言之,对于给定的 n 个复数空间的特征值 { a1+b1i,⋯,a** ...
- Lambda 表达式的基础语法
1.基础语法 java8引入新的操作符"->"箭头操作符,箭头操作符将Lambda表达式分成两部分 左侧:Lambda 表达式的参数列表,对应抽象方法的参数列表 右侧:需要执 ...
- js中==和===的区别以及总结
js中==和===的区别以及总结 学习js时我们会遇到 == 和 === 两种符号,现做总结如下 两种符号的定义 "==" 叫做相等运算符 "===" 叫做严格 ...
- Hadoop （8088）未授权访问
cd /vulhub/hadoop/unauthorized-yarn 加速下载环境 sudo vim /etc/docker/daemon.json 添加 {"registry-mirro ...
- 🔥 LeetCode 热题 HOT 100（41-50）
102. 二叉树的层序遍历 思路:使用队列. /** * Definition for a binary tree node. * public class TreeNode { * int val; ...
- 文件包含 & LFI-labs靶场
文件包含漏洞学习 冲冲冲,好好学习 2020.1.30 认真对待自己做出的每一个决定 知识与实践 Q:什么是文件包含? A:简单一句话,为了更好地使用代码的重用性,引入了文件包含函数,可以通过文件包含 ...
- RecyclerView跳转到指定位置的几种种方式
Mark一下: http://blog.csdn.net/huangxiaoguo1/article/details/53706971 https://www.jianshu.com/p/3acc39 ...
- selenium WebDriverWait
Selenium WebDriverWait的知识: 一.webdrivewait 示例代码 from selenium import webdriver from selenium.webdri ...
- 利用MySQL原数据信息批量转换指定库数据表生成Hive建表语句
1.写出文件工具类 package ccc.utile; import java.io.*; /** * @author ccc * @version 1.0.0 * @ClassName Write ...