博客音乐插件,为你的博客增添乐趣

No.1 单曲播放

可点击试玩

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="https://music.163.com/outchain/player?type=2&id=27571483&auto=1&height=66"></iframe>

auto:1 自动播放 0 反之
id:歌曲 id

No.2 列表播放

Code

<iframe frameborder="0" border="1" 
            marginwidth="0" marginheight="0"
            width="100%" height="200" 
            src="//music.163.com/outchain/player?type=0&id=4870830656&auto=1&height=80">
</iframe>

auto:0表示关,1表示开
id:表示你歌单(网易云)的id

摸鱼.jpg

No.3 更加人性化的列表播放

说实话我觉得第二个更好用一些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <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>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="aplayer"></div>
</body>
<script type="text/javascript">
    $.getJSON("https://api.heycmm.cn/List/4870830656",function(data){
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            mini: false,
            autoplay: false,
            theme: '#FADFA3',
            loop: 'all',
            lrcType: 3,
            preload: 'auto',
            volume: 0.7,
            mutex: true,
            listFolded: true,
            audio: data
        });
    });
</script>
</html>

autoplay:自动播放
mini:最小化,只有暂停和播放好像
list:后面那段数字就是你的歌单id

如下图这样
image.png

你懂我意思吧.jpg

No.4 MetingJs 由大佬 geektomya 推荐

这个挺不错,界面和上一个差不多,但是比上一个的音源多些

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
	server="netease"
	type="playlist"
	id="60198">
</meting-js>

Option

option default description
id require song id / playlist id / album id / search keyword
server require music platform: netease, tencent, kugou, xiami, baidu
type require song, playlist, album, search, artist
auto options music link, support: netease, tencent, xiami
fixed false enable fixed mode
mini false enable mini mode
autoplay false audio autoplay
theme #2980b9 main color
loop all player loop play, values: 'all', 'one', 'none'
order list player play order, values: 'list', 'random'
preload auto values: 'none', 'metadata', 'auto'
volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex true prevent to play multiple player at the same time, pause other players when this player start play
lrc-type 0 lyric type
list-folded false indicate whether list should folded at first
list-max-height 340px list max height
storage-name metingjs localStorage key that store player setting

官方文档
截图

image.png

展示:我的博客

  • 插件
    53 引用 • 198 回帖
  • 音乐

    你听到信仰的声音了么?

    51 引用 • 499 回帖 • 143 关注

赞助商 我要投放

23 回帖
请输入回帖内容 ...
  • 88250 1 赞同

    红山果这首歌不错 ❤️

  • mymoshou

    前面两个都是 163 的 API 啊

    1 回复
  • csfwff 1

    huaji 有些歌网易云不让外链

    3 回复
  • SherlockOuO

    对,前两个是的。

  • SherlockOuO

    对,这是最骚的

  • ldan2012

    不让外链。。下到自己服务器不就好了。。

    1 回复
  • 233333 1 赞同

    😏 这个服务器要到期了,我不打算续费,代码已经开源,可以自己搭建啊

  • geektomya 1 赞同

    我发现用你博客那个东西可以无视网易云的限制,强制外链trollface 然后我就 copy 了你的那个播放器代码换成自己的歌,美滋滋doge

    2 回复
  • csfwff 1

    🤫🤫🤫嘘,其实我也是 copy 别人的huaji

    1 回复
  • cuijianzhe

    这么牛逼啊

    1 回复
  • cuijianzhe

    这么牛逼啊

  • happinesslijian

    第二个如何做到列表循环播放呢?代码中只会播放第一首歌,结束之后就不会自动播放第二首歌了。如何通过代码实现列表循环播放呢?

    1 回复
  • SherlockOuO

    有些歌外链不让放的,他就会自动停止

  • SherlockOuO

    好主意诶

  • happinesslijian

    新问题来了 如下图所示:

    怎么能放红框内的颜色和背景图片颜色一样呢?

    图片.png

    现有代码如下:

    <center>
    <iframe frameborder="no" border="0" 
    			marginwidth="0" marginheight="0" 
    			width=298 height=52 
    			src="//music.163.com/outchain/player?type=0&id=4898826053&auto=1&height=32">
    </iframe>
    </center>
    
    
    
    
    
    
  • 99999

    楼主提供了三种方法,非常方便,感谢分享 👍

  • rrhtk

    请问第三种方式请求的时候 被网易云禁止跨域怎么解决?

    1 回复
  • happinesslijian

    大家可以试试我这样的方式感觉还不错

    博客地址 https://blog.k8s.fit

    代码如下:

    <center style="
        position: absolute;
        text-align: center;
        width: 100%;
        z-index: 9999;">
    <iframe frameborder="no" border="0" 
    		 marginwidth="0" marginheight="0" 
    		 width=298 height=52 
    		 src="//music.163.com/outchain/player?type=0&id=4898826053&auto=1&height=32">
    </iframe>
    </center>
    
  • geektomya

    楼主可以试一下这种方式:可以用几个平台的,还可以强制那些不可以外链的歌:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
    <meting-js
    	server="netease"
    	type="song"
    	id="572720628"
    </meting-js>
    

    将上面代码复制到你想要播放器的地方,就可以引入播放器了。想要换播放器内容只需要修改 meting-js

    server 是歌服务的提供者:可以是 netease:网易;tencent:腾讯;xiami:虾米;kugou:酷狗;baidu:百度

    type 是你引入的类型:playlist:歌单;song:单曲;专辑:album;关键词:search;歌手:artist

    id 就是对应类型的 id:在歌原网址中可以看到

    maybe 就是这样。。。原理的话我也就不知道了,全靠 copy 别人huaji

    想要定制一些样式的话可以看:https://blog.csdn.net/ywen_sama/article/details/88646741

    2 回复
  • geektomya

    具体方法我发出了,你可以看一下试试huaji

  • SherlockOuO

    好嘞

  • cloudlang

    这个不错,已用上,发现有个问题,播放列表好像不是实时更新,不清楚是不是浏览器缓存的原因

  • SherlockOuO

    不知道诶,问问度娘或者谷歌嘛 😂

请输入回帖内容 ...