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

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



  下面将给出一个具体的例子,在这个例子中,我们展示的歌曲为孙燕姿的遇见,需要事先设置好这首歌的标题、演唱者、播放URL、封面图片链接、歌词。具体的HTML代码如下:




    
    
    


    

自制音乐播放器

                [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]总有一天 我的谜底会揭开
            

运行该代码,可以看到在Chrome浏览器中的显示如下:

运行效果

点击图片中的播放按钮,你就可以快乐地欣赏歌曲啦Enjoy

注意:本人现已开通两个微信公众号: 因为Python(微信号为:python_math)以及轻松学会Python爬虫(微信号为:easy_web_scrape), 欢迎大家关注哦~~

你可能感兴趣的:(小型音乐播放器插件APlayer.js的简单使用例子)