小型音樂播放器插件APlayer.js的簡單使用例子
標簽：
JavaScript
我们使用APlayer.js的方式为：cdn服务，其HTML标签为：
<link src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
下面将给出一个具体的例子，在这个例子中，我们展示的歌曲为孙燕姿的遇见，需要事先设置好这首歌的标题、演唱者、播放URL、封面图片链接、歌词。具体的HTML代码如下：
<!DOCTYPE html><html><head>
<link >
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
作者：但盼风雨来_jc
链接：https://www.jianshu.com/p/0fc90914e170
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦