本篇博客將會給出一個小型音樂播放器插件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）， 歡迎大家關注哦~~