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 工程内容 实现一个简单的音乐播放器,要求功能 ...
随机推荐
- odoo中Controller
一:Controller 一般通过继承的形式来创建controller类,继承自odoo.http.Controller. 以route装饰器来装饰定义的方法,提供url路由访问路径: class M ...
- (python函数02)列表生成式
(python函数02)列表生成式 示例代码 num = [i for i in range(1, 10)] print(num) num = [i for i in range(1, 10) ...
- (JAVA3)MarkDown语法
(三)MarkDown语法 分级标题(用 #数量 表示 级标题) #+空格+一级标题+回车 = 一级标题 ##+空格+二级标题+回车 = 二级标题 ###+空格+三级标题+回车 = 三级标题 加粗 选 ...
- GE ifix 5.5中关于历史报警表的制作
在关于污水处理厂项目实施过程中,按照业主要求,需要用到报警历史的查询功能,遂搜资料,整理在ifix5.5下如何实现报警历史的查询,经过一天的研究,以及多天的入坑,出坑,总算完成.现整理如下,供后来人参 ...
- FastAPI：一个测试人员视角的教程
前言 教程肯定谈不上了,主要还是就自己的理解分享内容而已 内容是连官方文档的基础教程都没涵盖起的 建议直接看官方文档 以个人视角来分享,希望各位通过这个可以写接口了 需要自取 完整视频链接:https ...
- Android 模块打包生成aar远程坐标（sdk）
Android 模块打包生成aar远程坐标 打包成AAR到本地仓库 在模块的gradle文件中加入apply plugin: 'maven' *repository(url:"file:/ ...
- 记一次GKCTF之旅
GKCTF游记 昨天吧,去GKCTF玩了一下.题目很有意思,宝可梦也很好玩,我心情非常好,天台的风也很大...... 不多说了,把昨天认真看过的几道题记录总结一下.这里特别感谢出题的二进制师傅们,感谢 ...
- HCNA Routing&Switching之DHCP服务
前文我们了解了STP的端口状态.计时器以及端口状态切换和网络拓扑变化相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15140672.html:今天我们 ...
- 4、关于numpy.random.seed()的使用说明
定义:seed( ) 用于指定随机数生成时所用算法开始的整数值,如果使用相同的seed( )值,则每次生成的随即数都相同,如果不设置这个值,则系统根据时间来自己选择这个值,此时每次生成的随机数因时间差 ...
- JavaScript学习05（操作DOM）
操作DOM DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被结构化为对象树: 通过这个对象模型,Java ...