小型音乐播放器插件APlayer.js的简单使用例子

时间：2022-08-29 20:57:57

  本篇博客将会给出一个小型音乐播放器插件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浏览器中的显示如下：

小型音乐播放器插件APlayer.js的简单使用例子

点击图片中的播放按钮，你就可以快乐地欣赏歌曲啦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 制作插件 &lpar;javaScript音乐播放器&rpar;

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

  5. Asp&period;Net MVC中Aplayer&period;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&plus;纯JS制作音乐播放器

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

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

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

随机推荐

  1. Hadoop伪分布式搭建（一&rpar;

     下面内容主要说明在Windows虚拟机上面,怎么搭建一个Hadoop伪分布式,并如何运行wordcount程序和网页查看HDFS文件系统. 1 相关软件下载和安装 APACH官网提供hadoop版本 ...

  2. 使用css3中calc&lpar;&rpar;进行自适应布局

    calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...

  3. android 自定义进度条颜色

    android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对Android自定义进度条的学习过程!   这个没法了只能看源码了,还好下载了源码, sources\b ...

  4. 【NOI2015】软件包管理器

    NOI难得的水题,话说还是T2诶……又学到了线段树的一种新的魔性使用 看sxysxy大神的代码才写出来的,sxysxy_orz 原题: Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包 ...

  5. 练习题之Wait&sol;Notify

    方案一: public class PrintABC { public static void main(String[] args) { AtomicInteger synObj = ); Runn ...

  6. 自己使用Jquery封装各种功能分享

    自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...

  7. SpringMVC进行文件的上传以及多文件的上传&lpar;转&rpar;

    基本的SpringMVC的搭建在我的上一篇文章里已经写过了,这篇文章主要说明一下如何使用SpringMVC进行表单上的文件上传以及多个文件同时上传的步骤 SpringMVC 基础教程 框架分析:htt ...

  8. HGE基础教程

    作者:寰子 来源:http://www.hgechina.com/前言: 写道: 无意中发现了hge中文社区,听朋友介绍,认识了hge,然后开始对它进行研究,并使用hge开始制作游戏. 因为我所得的资 ...

  9. Python的列表

    1. Python的列表简介 1. 1 列表的定义 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 ,即它的 ...

  10. mysql数据库迁移文档

    数据库迁移文档 一.需求 确保数据库稳定的运行,为开发人员提供方便的测试数据库和生产数据库的环境. 二.数据库整体架构(master/slave) 1.slave数据库安装 rpm -Uvh http ...

相关文章