本篇博客将会给出一个小型音乐播放器插件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. 第四次scrum冲刺

    一.第四次Scrum任务 继续上次的任务,完成校园服务中的成绩查询,失物招领,长大集市的功能. 小组的地址链接:https://github.com/Weifeng513/-1/tree/master ...

  2. Linux-3.0.8 input subsystem代码阅读笔记

    先乱序记录一下阅读Linux input subsystem代码的笔记. 在input device driver的入口代码部分,需要分配并初始化input device结构,内核提供的API是inp ...

  3. UWP关于图片缓存的那些破事儿

    看似简单的功能,实施起来却是有着一堆大坑. 按着基本功能来写吧 1.选择图片并显示到Image控件中 2.图片序列化为byte数组以及反序列化 3.本地存储与读取 1.选择图片: 逻辑就是使用File ...

  4. C#中数组、ArrayList和List三者的区别 转

    在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. ...

  5. EF学习笔记（七）：读取关联数据

    总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 本篇参考原文链接:Reading Related Data 本章主要讲述加载显示关联数据: 数据加载分为以下三种 Lazy l ...

  6. G++与C++的区别

    C++是一门计算机编程语言,G++不是语言,是一款编译器中编译C++程序的命令而已. 不同的编译器,会对代码做出一些不同的优化 比如说: a++;  和 ++a; 如果从标准C的角度去理解.a++这个 ...

  7. Eclipse项目里面看源码和文档

    Eclipse项目里面看源码 1.新建项目列表 2.进入struts2-core-2.3.20.jar,双击之后,看不到源码 3.右键struts2-core-2.3.20.jar,选择propert ...

  8. MySQL优化技巧

    目录 MySQL的特点 数据类型优化 整型类型 小数类型 字符串类型 时间类型 主键类型的选择 特殊类型的数据 索引优化 一个使用Hash值创建索引的技巧 前缀索引 多列索引 聚簇索引 覆盖索引 重复 ...

  9. web安全Wargame—Natas解题思路（1-26）

    前言: Natas是一个教授服务器端Web安全基础知识的 wargame,通过在每一关寻找Web安全漏洞,来获取通往下一关的秘钥,适合新手入门Web安全. 传送门~ 接下来给大家分享一下,1-20题的 ...

  10. 参考信息 - 云计算与Kubernetes

    基本概念 基础设施即服务(Infrastructure as a service) 通常指的是在云端为用户提供基础设施,如:虚拟机.服务器.存储.负载均衡.网络等等.亚马逊的AWS就是这个领域的佼佼者 ...