本篇博客将会给出一个小型音乐播放器插件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. 多个子域名前端网站调用同一个webAPI时session混用问题

    session机制: 当程序需要为某个客户端的请求创建一个session的时候,服务器首先检查这个客户端的请求里是否已包含了一个session标识 - 称为session id,如果已包含一个sess ...

  2. python学习，excel操作之xlsxwriter常用操作

    from datetime import datetime import xlsxwriter #打开文件 workbook = xlsxwriter.Workbook('Expenses03.xls ...

  3. vscode配置git及码云

    1.将代码放到码云 到码云里新建一个仓库,完成后码云会有一个命令教程按上面的来就行了 码云中的使用教程: Git 全局设置: git config --global user.name "A ...

  4. 功能强大的js数组方法：reduce

    arr.reduce()方法接受一个函数作为累加器,数组中的每个值从左到右开始缩减,最终为一个值. reduce接受的参数主要有callback(回调函数)和可选参数initvalue(作为第一次调用 ...

  5. 急速安装lnmp 编译版本-wiki-shell脚本实现一键部署

    shell脚本lnmp.sh 环境:centos 6.5 .64位 #!/bin/bash yum install -y nano vim wget wget http://www.atomicorp ...

  6. 关于isNaN()函数的细节

    根据<JavaScript高级程序设计>的解释,NaN,即非数值(Not a Number),用于表示一个本来要返回数值的操作数未返回数值的情况,例如5/0就会得到NaN. 而因为NaN的 ...

  7. 学习C++后感

    c++是一门系统级语言,记得大一是要学习这门课时还上网找过学习方法.但网上很多学习方法看的我都头晕,都说学习C++很难,有的说学C++前最好先学C语言,有的说学C++最好不要学C语言,当翻了C++课本 ...

  8. Docker应用：Docker-compose（容器编排）

    阅读目录: Docker应用:Hello World Docker应用:Docker-compose(容器编排) 前言: 昨天完成了Docker入门示例(Docker应用:Hello World),示 ...

  9. 目标检测算法(2)SPP-net

    本文是使用深度学习进行目标检测系列的第二篇,主要介绍SPP-net:Spatial Pyramid Pooling in Deep ConvolutionalNetworks for Visual R ...

  10. .net core 发布linux报错“The configured user limit (128) on the number of inotify instances has been reached”

    https://stackoverflow.com/questions/45875981/error-while-reading-json-file-in-dotnet-core-the-config ...