APlayer 是一个 HTML5 音频播放器，它将 audio 标签封装，结合 CSS 可制作出漂亮的播放器 UI。它支持设置歌名、歌手和歌词，可以设置是否自动播放，支持缩略图，支持播放进度以及设置播放源。

1. 首先在头部加载播放器样式文件。

<link rel="stylesheet" href="/media/css/APlayer.min.css">

1. 在body中加入播放器 div，由于有多个播放模式，这里使用容器 container 封装5个 player。
   • 注意：这里的播放器3，内嵌了一个属性： <pre class="aplayer-lrc-content"> ... </pre> ，嵌入了一首歌词。

    <div class="container">
        <h1>APlayer 音乐播放器 —— 支持歌词显示和曲目列表</h1>
        <hr>
        <h3>player1：正常模式</h3>
        <div id="player1" class="aplayer"></div>

        <hr>
        <h3>player2：精简模式</h3>
        <div id="player2" class="aplayer"></div>

        <hr>
        <h3>player3：带 lyrics 歌词模式</h3>
        <div id="player3" class="aplayer">
            <pre class="aplayer-lrc-content">
                [ti:You ll be in my heart]
                [ar:Phil Collins]
                [al:《人猿泰山》主题歌]
                [by:菲尔 柯林斯]
[00:00.00] <<Phil Collins -You ll Be In My Heart>> 
[00:03.00] <<Soundtrack From Tanzan>>
[00:11.00]Come, stop your crying, it will be all right 
[00:15.00]Just take my hand, hold it tight 
[00:20.00]I will protect you from, all around you 
[00:25.00][00:45.00]I will be here, don t you cry 
[00:30.00]For one so small, you seem so strong 
[00:35.00]My arms will hold you, keep you safe and warm 
[00:40.00]This bond between us, can t be broken 
[00:50.00]CAUSE you ll be in my heart 
[00:54.00]Yes, you ll be in my heart 
[00:59.00]From this day on
[01:01.00]  now and forever more 
[01:10.00]You ll be in my heart 
[01:14.00][03:16.00]No matter what they say 
[01:19.00]You ll be here in my heart
[01:24.00] always 
[01:32.00]Why can t they understand the way we feel? 
[01:37.00]They just don t trust, what they can t explain 
[01:42.00]I know we re different but, deep inside us 
[01:47.00]We re not that different at all 
[01:51.00]And you ll be in my heart 
[01:56.00]Yes, you ll be in my heart 
[02:01.00]From this day on,
[02:04.00][03:04.00] now and forever more 
[02:11.00]Don t listen to them
[02:14.00] cause what do they know? 
[02:17.00]We need each other, to have to hold 
[02:21.00][02:41.00]They ll see in time
[02:25.00] I know 
[02:31.00]When destiny calls you, you must be strong 
[02:36.00]I may not be with you, but you ve got to hold on 
[02:45.00]  I know
[02:48.00] we ll show them together 
[02:51.00] Cause you ll be in my heart 
[02:55.00]Believe me,  you ll be in my heart 
[03:00.00]I be there From this day on
[03:11.00]Oh ,You ll be in my heart (You ll be here in my heart)
[03:20.00] I ll be with you be here in my heart( I ll be there always )
[03:31.00]Always
[03:35.00] I ll be with you 
[03:41.00]I ll be there for you, always 
[03:44.00]Always and always
[03:50.00] Just look over your shoulder 
[03:55.00][04:00.00]Just look over your shoulder
[04:04.00] I ll be there, always
            </pre></div>

        <hr>
        <h3>player4：带曲目表模式</h3>
        <div id="player4" class="aplayer"></div>

        <hr>
        <h3>player5：带曲目表与 lyrics 歌词模式</h3>
        <div id="player5" class="aplayer"></div>
    </div>

3） 定制的播放器

• 载入基础播放器脚本文件 MyPlayer.js

<script src="./APlayer-master/APlayer.min.js"></script>

• 定制播放器属性参数 首先new一个对象，绑定播放器元素，设置各种选项，最后使用ap.init();载入播放器。

  注意:APlayer不依赖诸如jQuery或Zepto等第三方JS库，它直接将html5中的audio标签封装起来， 所以开发者只需简单几句代码就可在页面上呈现漂亮的音乐播放器了。

选项说明:

• element：绑定的播放器元素。
• narrow：是否使用窄屏模式，即只显示缩略图和播放按钮，请看演示demo中的样式3。
• autoplay：是否自动播放，注意这个在移动端手机上不支持自动播放的。
• showlrc：是否展示歌词，请看演示demo中的样式1。
• music：用来设置播放音乐相关信息的集合，其中title表示音乐标题，author表示音乐的作者，url表示播放文件地址，pic当然就是播放的音乐缩略图。

APlayer还提供了播放器事件，如载入播放器：ap.init()；播放：ap.play()和暂停：ap.pause()。

• 必须注意：
  • 属性变量赋值，使用了‘’引用，因此注意输入的字符串中，不能含有‘，或者事先进行转义。

<script>
var ap1 = new APlayer({
    element: document.getElementById('player1'),
    narrow: false,
    autoplay: true,
    showlrc: false,
    mutex: true,
    theme: '#e6d0b2',
    preload: 'metadata',
    music: {
        title: 'Tarzan: You ll Be in My Heart',
        author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/You ll Be in My Heart.mp3',
        pic: 'https://c2.staticflickr.com/8/7059/27146490673_eaec6f2e88_n.jpg'
    }
});
ap1.init();

var ap2 = new APlayer({
    element: document.getElementById('player2'),
    narrow: true,
    autoplay: false,
    showlrc: false,
    mutex: true,
    theme: '#e6d0b2',
    music: {
        title: 'Tarzan: Two Worlds (reprise',
        author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/Two Worlds (reprise.mp3',
        pic: 'https://c4.staticflickr.com/8/7240/27146490363_4a4e7a077c_q.jpg'
    }
});
ap2.init();

var ap3 = new APlayer({
    element: document.getElementById('player3'),
    narrow: false,
    autoplay: false,
    showlrc: true,
    mutex: true,
    theme: '#615754',
    music: {
        title: 'Tarzan: You ll Be in My Heart(Phil version',
        author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/You ll Be in My Heart(Phil version.mp3',
        pic: 'https://c4.staticflickr.com/8/7240/27146490363_4a4e7a077c_q.jpg'
    }
});
ap3.init();

var ap4 = new APlayer({
    element: document.getElementById('player4'),
    narrow: false,
    autoplay: false,
    showlrc: false,
    mutex: true,
    theme: '#ad7a86',
    music: [
        {
        title: 'Tarzan: You ll Be in My Heart',
        author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/You ll Be in My Heart.mp3',
        pic: 'https://c4.staticflickr.com/8/7436/27146494083_a39d9091ea_q.jpg'
        },
        {
            title: 'Tarzan: You ll Be in My Heart(Phil version',
            author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/You ll Be in My Heart(Phil version.mp3',
        pic: 'https://c4.staticflickr.com/8/7240/27146490363_4a4e7a077c_q.jpg'
        },
        {
            title: 'Tarzan: Two Worlds (reprise',
            author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/Two Worlds (reprise.mp3',
        pic: 'https://c8.staticflickr.com/8/7404/27757481495_70b7e1de57_m.jpg'
        },
        {
        title: 'Tarzan: Trashin the Camp(Phil version',
        author: 'Phil Collins & Mark Mancina',
        url: './media/PhilCollins/Trashin the Camp(Phil version.mp3',
        pic: 'https://c5.staticflickr.com/8/7375/27145298764_84a566660e_n.jpg'
        }
    ]
});
ap4.init();

</script>