小型音乐播放器插件APlayer.js的简单使用例子
2018-07-01 17:37
489 查看
本篇博客将会给出一个小型音乐播放器插件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), 欢迎大家关注哦~~
相关文章推荐
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 使用Eclipse+maven3插件开发一个Servlet3.0的简单例子
- Node.js使用模块简单例子
- 视频播放插件Video.js简单使用
- js-视频播放插件Video.js简单使用
- 使用Eclipse+maven3插件开发一个Servlet3.0的简单例子
- jquery.validate.js插件使用简单说明
- Bootstrop统计图表插件Chart.js简单使用
- viewer.js插件简单使用说明
- fastclick.js插件使用简单说明
- SKPlayer -- 一个超级简单好用的音乐插件+CSS+HTML+JS
- 使用danmuplayer.js插件实现Java web网站视频发弹幕
- template.js简单使用例子
- fastclick.js插件使用简单说明
- angularjs ngRoute的使用简单例子
- 使用 原生js 制作插件 (javaScript音乐播放器)
- 简单使用pdf插件pdf.js
- 用最简单的例子演示如何使用js或者$.ajax进行跨域请求
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- js 简单倒计时插件和使用方法