本篇博客将会给出一个小型音乐播放器插件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. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  2. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  3. 简约的HTML5音乐播放器插件

    从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...

  4. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. Asp.Net MVC中Aplayer.js音乐播放器的使用

    1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...

  6. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  7. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  8. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  9. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

随机推荐

  1. python之路(七)-递归算法

    递归 特点 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题是十分有效的,它往往使算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1) 递归就是在 ...

  2. 默认空间和webapps下项目部署

    用eclipse默认的工作区和webapps的细节 用{WORKSPACE}表示你的eclipse的工作空间根目录,然后你打开 {WORKSPACE}\.metadata\.plugins\org.e ...

  3. eclipse新建的项目，也添加到tomcat上了，地址栏访问的时候就是访问不到。。。怎么办

    其实是可以访问的,目前我遇到以下两种可能出现这种现象的原因: 1.这个项目在你写的过程中改了名字,这样你访问改后的名字是不行的,需要在下图,也就是server服务器的server.xml文件中修改访问 ...

  4. 当padding/margin的取值形式为百分比时。。。。。

    一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...

  5. 【Solidity】学习（3）

    函数 重定义 不支持重定义,会在编译时候报错 pragma solidity ^0.4.0; contract test { uint public a =100; function changeA ...

  6. Mac再建管理员帐户

    在Mac上添加用户没有成功, 把原来的管理员的用户群组修改后, 账户类型成为普通用户. 百度如何重新添加管理员: Mac上修改用户名后,无法用管理员账号和密码登录. 按照超过方法下去, 出现问题: 1 ...

  7. 编码符_new88

    begin#239B38F58D59E401465E1FEE0AFA7AE2DD920EB6645F4A2075C7ABBBE2141B925668C9D635D90DE884907F4E52F921 ...

  8. Android NDK学习（五）：Java调用Native代码流程总结

    编写一个Java类,并且在某个方法签名的修饰符中加上native修饰符. 使用Javac命令编译第一步中的Java类,使之成为一个class文件. 使用Javah -jni 包名.类名 生成Jni接口 ...

  9. MySQL InnoDB 行记录格式（ROW_FORMAT）

    MySQL InnoDB 行记录格式(ROW_FORMAT) 一.行记录格式的分类和介绍 在早期的InnoDB版本中,由于文件格式只有一种,因此不需要为此文件格式命名.随着InnoDB引擎的发展,开发 ...

  10. Go语言数组

    目录 声明数组 数组在内存的结构 初始化数组 使用数组 函数间传递数组 数组使用注意事项 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列(这是一种同构的数据结构);这种类型可以是任意的原始类 ...