小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子。关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/APlayer 。
我们使用APlayer.js的方式为:cdn服务,其HTML标签为:
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
下面将给出一个具体的例子,在这个例子中,我们展示的歌曲为孙燕姿的遇见,需要事先设置好这首歌的标题、演唱者、播放URL、封面图片链接、歌词。具体的HTML代码如下:
<!DOCTYPE html> <html> <head> <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script> <style> .demo{width:360px;margin:60px auto 10px auto} .demo p{padding:10px 0} </style> </head> <body> <div class="demo"> <p><strong>自制音乐播放器</strong></p> <div id="player1"> <pre class="aplayer-lrc-content"> [00:00.00] 作曲 : 林一峰 [00:01.00] 作词 : 易家扬 [00:24.898]听见 冬天的离开 [00:29.697]我在某年某月 醒过来 [00:34.768]我想 我等 我期待 [00:40.598]未来却不能因此安排 [00:53.398]阴天 傍晚 车窗外 [00:58.758]未来有一个人在等待 [01:04.298]向左向右向前看 [01:09.599]爱要拐几个弯才来 [01:14.369]我遇见谁 会有怎样的对白 [01:19.638]我等的人 他在多远的未来 [01:24.839]我听见风来自地铁和人海 [01:30.399]我排着队 拿着爱的号码牌 [01:56.388]阴天 傍晚 车窗外 [02:02.298]未来有一个人在等待 [02:06.650]向左向右向前看 [02:12.000]爱要拐几个弯才来 [02:16.980]我遇见谁 会有怎样的对白 [02:22.289]我等的人 他在多远的未来 [02:27.989]我听见风来自地铁和人海 [02:32.688]我排着队 拿着爱的号码牌 [02:43.380]我往前飞 飞过一片时间海 [02:48.298]我们也曾在爱情里受伤害 [02:53.689]我看着路 梦的入口有点窄 [02:58.748]我遇见你是最美丽的意外 [03:05.888]总有一天 我的谜底会揭开 </pre> </div> </div> <script> var ap = new APlayer ({ element: document.getElementById('player1'), narrow: false, autoplay: true, showlrc: true, music: { title: '遇见', author: '孙燕姿', url: 'http://music.163.com/song/media/outer/url?id=287035.mp3', pic: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000002ehzTm0TxXC2.jpg' } }); ap.init(); </script> </body>
运行该代码,可以看到在Chrome浏览器中的显示如下:
点击图片中的播放按钮,你就可以快乐地欣赏歌曲啦~Enjoy~
注意:本人现已开通两个微信公众号: 因为Python(微信号为:python_math)以及轻松学会Python爬虫(微信号为:easy_web_scrape), 欢迎大家关注哦~~
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
[剑指offer] 二叉树中和为某一值的路径
题目描述 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径。路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径。 解题思路 用前序遍历的方式访问到某一结点时,把该结点添加到路径上,并用目标值减去该节点的值。如果该结点为叶结点并且目标值减去该节点的值刚好为0,则当前的路径符合要求,我们把加入res数组中。如果当前结点不是叶结点,则继续访问它的子结点。当前结点访问结束后,递归函数将自动回到它的父结点。因此我们在函数退出之前要在路径上删除当前结点,以确保返回父结点时路径刚好是从根结点到父结点的路径。 参考代码 import java.util.ArrayList; /** public class TreeNode { int val = 0; TreeNode left = null; TreeNode right = null; public TreeNode(int val) { this.val = val; } } */ public class Solution { ArrayList<ArrayList<Integer> ...
- 下一篇
python的面向对象和类
目录 一、基本知识点 1、面向过程编程 2、面向对象编程 3、注意 二、类的结构 1、类的理解 2、代码形式 3、类和函数的一些区别 4、类中的数据 5、类中的方法(基础) 三、类的实例化 四、类的继承 1、MRO 2、派生、调用、重写 3、super() 4、属性查找顺序 5、广度和深度优先 五、抽象类 1、规则 2、抽象类的使用 六、类的封装功能 1、__xx私有变量 2、property 3、函数封装 七、类中的方法 1、绑定方法 实例绑定方法 类绑定方法 2、非绑定方法 八、类的内置方法(特殊方法,后补) 九、对象实例化过程(简单) 十、元类 1、使用exec 2、元类的定义 3、类的组成要素 4、实例化类对象 5、通过__new__和__init__控制类对象的产生过程 6、通过__call__控制类对象实例化对象的过程 7、单例模式的使用 通过类的new方法操作 通过元类操作 十一、几个技术问题 1、__new__方法 2、__init__方法 3、super()调用时传入的都是子类对象 4、为啥对象的绑定方法id不同 5、类是装饰器 没有参数的装饰器 有参数的装饰器 6、...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS关闭SELinux安全模块
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装