9oieI.jpg

APIayer

先分享一个github项目链接APIayer,也是博主自己在用的

废话不多说直接上html代码吧

<!--音乐播放器-->
<link rel="stylesheet" href="http://www.bk.hanbaojian.top/music.css">
  /*此处可以根据自己的需求修改插件的位置*/
    <style type="text/css">
        #main{
            margin: 0 auto;
            bottom:0; 
            left:0;
            top:53%;
            z-index: 21474833
        }
    </style>
<div class="wapnone">
<div id="main">
        <div id="aplayer"></div>
</div>
<script src="http://www.bk.hanbaojian.top/music.js"></script>
<script>
  var ap = new APlayer({
      element: document.getElementById('aplayer'),
      listFolded: true,
      narrow: false,
      /*自动播放,默认值为false,true为开启自动播放*/
      autoplay: false,
       volume: 0.3,

    listMaxHeight: 90,
      showlrc: false,
      /*lrc歌词显示方式,默认值为1,HTML显示方式,2为JavaScript字符串显示方式,3为lrc文件加载显示方式*/
  /*我没有使用歌词,太麻烦了*/
      lrcType: 3,
      /*主题颜色*/
      theme: '#00b5ad',
      /*歌曲集合列表*/
     /*这是我自己的歌单,你可以换成自己*/
      audio:[
          {
              /*歌名*/
              title: '喜欢你',
              /*作者*/
              author: '邓紫棋',
              /*歌曲*/
              url: 'http://music.163.com/song/media/outer/url?id=28949444.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLHum6.jpg',
              /*歌词*/
              lrc: 'lrc/ainimeicha.lrc'
          },
          {
              /*歌名*/
              title: 'Lemon Tree',
              /*作者*/
              author: 'Fool’Garden',
              /*歌曲*/
              url: 'http://music.163.com/song/media/outer/url?id=27180681.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLHe61.jpg'
          },
          {
              /*歌名*/
              title: 'Mojito',
              /*作者*/
              author: '周杰伦',
              /*歌曲*/
              url: 'http://www.music.hanbaojian.top/images/mojito.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLHmOx.jpg'
          },
          {
              /*歌名*/
              title: '你的酒馆对我打了烊',
              /*作者*/
              author: '陈雪凝',
              /*歌曲*/
              url: 'http://www.music.hanbaojian.top/images/nidejiuguan.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLHlkD.jpg'
          },
          {
              /*歌名*/
              title: '芒种',
              /*作者*/
              author: '赵方婧',
              /*歌曲*/
              url: 'http://music.163.com/song/media/outer/url?id=1369798757.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLH1te.jpg'
          },
          {
              /*歌名*/
              title: 'Bad Gay',
              /*作者*/
              author: 'Billie Eilish',
              /*歌曲*/
              url: 'http://music.163.com/song/media/outer/url?id=1355147933.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLHMTO.jpg'
          }
,
          {
              /*歌名*/
              title: '小妖精',
              /*作者*/
              author: '冷面Lim&孙笑川',
              /*歌曲*/
              url: 'http://www.music.hanbaojian.top/images/xiaoyaojing.mp3',
              /*音乐专辑图片*/
              pic: 'https://s1.ax1x.com/2020/08/31/dLHK0K.jpg'
          }

,{
/*歌名*/
title: 'Last Dance',
/*作者*/
author: '熊梓淇',
/*歌曲*/
url: 'http://www.music.hanbaojian.top/images/lastdance.mp3',
/*音乐专辑图片*/
pic: 'https://s1.ax1x.com/2020/08/31/djPT0O.jpg'}
 
      ]
  });
</script>
</div>
<!--音乐播放器-->

网易云

网易云也提供了小插件
先上官网
21.jpg
开始搜索你想要的歌
222.jpg
选择你想要的版本(网抑云好像好多歌没有正版版权了)
QQ截图20200905132244.jpg
选择外链播放器
23232.jpg
获得html代码
423424242.jpg

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=573923752&auto=0&height=66"></iframe>

PS:这里还显示了这首歌的id=573923752
拼接url:

http://music.163.com/song/media/outer/url?id=XXXXXXXX.mp3 就可以直接调用

演示:

http://music.163.com/song/media/outer/url?id=573923752.mp3


文章发布自:黑凤梨の博客,转载请注明出处,谢谢!