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

爱被打了一巴掌 2022-05-21 06:07 146阅读 0赞

本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子。关于APlayer.js的具体介绍和Github地址，可以参考： [https://github.com/MoePlayer/APlayer][https_github.com_MoePlayer_APlayer] 。  
  我们使用APlayer.js的方式为：cdn服务，其HTML标签为：

下面将给出一个具体的例子，在这个例子中，我们展示的歌曲为孙燕姿的遇见，需要事先设置好这首歌的标题、演唱者、播放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浏览器中的显示如下：

![运行效果][70]  
  
点击图片中的播放按钮，你就可以快乐地欣赏歌曲啦~Enjoy~

注意：本人现已开通两个微信公众号： 因为Python（微信号为：python\_math）以及轻松学会Python爬虫（微信号为：easy\_web\_scrape）， 欢迎大家关注哦~~

[https_github.com_MoePlayer_APlayer]: https://github.com/MoePlayer/APlayer
[70]: /images/20220521/355481b5db68405a9b5b84e2cfc75317.png