本篇博客将会给出一个小型音乐播放器插件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. java面试问题收集(2)

    1 Integer int相等问题 Integer对象和int比较的时候会有一个拆箱的过程,始终相等 Integer和new Integer对象不会相等,引用不同 两个Integer对象比较,Inte ...

  2. Node.js 开发指南

    1.Node.js 简介 Node.js 其实就是借助谷歌的 V8 引擎,将桌面端的 js 带到了服务器端,它的出现我将其归结为两点: V8 引擎的出色: js 异步 io 与事件驱动给服务器带来极高 ...

  3. PHP的生命周期：

  4. 【转载】关于.NET下开源及商业图像处理(PSD)组件

    原创]关于.NET下开源及商业图像处理(PSD)组件   阅读目录 1 前言 2 .NET图像处理组件总结 3.相关资源网址        本博客所有文章分类的总目录:http://www.cnblo ...

  5. 背水一战 Windows 10 (103) - 通知（Toast）: 基础, 按计划显示 toast 通知

    [源码下载] 背水一战 Windows 10 (103) - 通知(Toast): 基础, 按计划显示 toast 通知 作者:webabcd 介绍背水一战 Windows 10 之 通知(Toast ...

  6. 使用Sybmol模块来构建神经网络

    符号编程 在之前的文章,我们介绍了NDArray模块,它是MXNet中处理数据的核心模块,我们可以使用NDArray完成非常丰富的数学运算.实际上,我们完全可以使用NDArray来定义神经网络,这种方 ...

  7. ISG 2018 Web Writeup

    作者:agetflag 原文来自:ISG 2018 Web Writeup ISG 2018 Web Writeup CTF萌新,所以写的比较基础,请大佬们勿喷,比赛本身的Web题也不难 calc 首 ...

  8. IM群聊消息的已读回执功能该怎么实现？

    本文引用了架构师之路公众号作者沈剑的文章,内容有改动,感谢原作者. 1.前言 我们平时在使用即时通讯应用时候,每当发出一条聊天消息,都希望对方尽快看到,并尽快回复,但对方到底有没有真的看到?我却并不知 ...

  9. 每天学点SpringCloud（十）：SpringCloud监控

    今天我们来学习一下actuator这个组件,它不是SpringCloud之后才有的,而是SpringBoot的一个starter,Spring Boot Actuator.我们使用SpringClou ...

  10. 查看windows到期时间

        查看windows到期时间    Slmgr.vbs  -xpr