小型音乐播放器插件APlayer.js的简单使用例子 1
本篇博客将会给出一个小型音乐播放器插件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), 欢迎大家关注哦~~
小型音乐播放器插件APlayer.js的简单使用例子 1相关推荐
- 小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/. ...
- js html5 音乐播放器代码大全,js实现简单音乐播放器
本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下 效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节 完整代码(直接拿来用) audio功能开发 * { marg ...
- PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...
- aplayer.js音乐播放器插件使用
aplayer.js音乐播放器插件使用 闲来无事,想把自己的博客园正酷炫点,平时也有收藏癖,见到好玩的有趣的酷炫的都收藏起来了,比较漂亮的博客园都保存了今天的目的:弄一个左下角的音乐播放器插件 不会就 ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- php项目网页音乐播放器插件,10个免费开源的JS音乐播放器插件
10个免费开源的JS音乐播放器插件 三月 24, 2015 评论 (3) Sponsor 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里 ...
- jQuery小型mp3音乐播放器插件
下载地址 jquery和css3制作的网页音乐播放器插件,简约漂亮的ui样式,支持mp3多首歌曲切换,带标题和进度条拖动音频播放代码 dd:
- 仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
- html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
最新文章
- 概率潜在语义分析(Probabilistic Latent Semantic Analysis,PLSA)
- 开发者进阶宝典,HarmonyOS 职业认证全奉上
- mysql查询今天、昨天、7天、近30天、本月、上一月 数据
- ***组网不用愁之1-中小企业***网络组建应用实录
- 使用arm-linux-androideabi-addr2line 定位Unity Android 段错误
- Java版本的Bot Framework SDK
- P3959 [NOIP2017 提高组] 宝藏
- 文档 修订 非修订区别_修订和不变性
- 关于HotSpot VM以及Java语言的动态编译 你可能想知道这些
- __str__是什么函数_PHP str_shuffle()函数与示例
- 一台电脑连接到另外一台电脑的虚拟机里面的系统
- 第十三届蓝桥杯省赛模拟赛题解(2022年第四次模拟赛)C/C++
- Redis集群原理详解
- Linux基础:systemctl和journalctl常用命令
- idea中项目文件颜色含义
- 大数据BI可视化基础
- 阿里云服务器的购买和部署
- 2008 IT图书大盘点
- 计算机网络分代核心的属性,计算机网络开发专业核心能力题库-操作
- VPCS使用教程:模拟GNS3虚拟PC
热门文章
- 网店新规的误读与媒体的谎言
- 软件工程师未来展望_对软件开发者平台未来的展望
- 如何在visual studio下编译zxing cpp,以及zxing c++的使用
- 技术人生的职场众生相—测试篇
- matlab 文字版,MATLAB图书合集×110本免费奉送(All MATLAB Books Collection)文字版[PDF]
- 博士申请 | 香港理工大学智能计算实验室招收机器学习方向全奖博士/RA/博后
- A-level Computer Science 计算机科学学习笔记/经验分享/教学 (1):考试流程和大纲
- linux错误码分析
- php读取excel效率,PhpSpreadsheet VS Box\Spout读取excel性能对比
- 《python深度学习》学习笔记与代码实现(第六章,6.3 循环神经网络的高级用法)