Html5添加APlayer音乐播放器插件教程

一、APlayer音乐播放器安装
可以通过npm来安装APlayer音乐播放器插件。
$ npm install aplayer

二、使用方法
使用APlayer音乐播放器插件需要引入APlayer.min.css和APlayer.min.js文件。
<link rel="stylesheet" href="APlayer.min.css">
<script src="APlayer.min.js"></script>

三、HTML结构
可以使用一个<div>元素作为音乐播放器的容器。
<div id="player1" class="aplayer"></div>

如果需要为歌曲添加同步歌词，可以在容器中使用pre.aplayer-lrc-content来设置歌词。
<div id="player1" class="aplayer">
<pre class="aplayer-lrc-content">
[ti:平凡之路]
[ar:朴树]
[al:《后会无期》主题歌]
[by:周敏]
00:00.00]平凡之路 - 朴树
[00:04.01]作词：韩寒朴树
[00:08.02]作曲：朴树编曲：朴树
[00:12.02]徘徊着的在路上的
[00:17.37]你要走吗
[00:23.20]易碎的骄傲着
[00:28.75]那也曾是我的模样

</pre>
</div>

四、初始化插件
可以通过下面的方式来初始化APlayer音乐播放器插件。
var ap = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: true,
showlrc: false,
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
});
ap.init();

五、配置参数
{
element: document.getElementById('player1'),
narrow: false,
autoplay: true,
showlrc: false,
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
}

KeyMob是国内专业的手机广告优化管理平台 ,基于强大的技术支持、优质的合作伙伴,为广告主提供精准的无线营销和品牌推广服务,为应用开发者提供大量优质的广告展现并创造广告收益。

来源：oschina

链接：https://my.oschina.net/u/2505907/blog/596725

标签

aplayer