登录 注册

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

本贴最后更新于 1830 天前，其中的信息可能已经时移世异

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

展示：我的博客

  • 插件
    102 引用 • 622 回帖 • 3 关注
  • 音乐

    你听到信仰的声音了么？

    61 引用 • 512 回帖
雅安 位置
1 感谢
3 关注
5 收藏
1 赞同
25 回帖
6
3
3
2
2
5.9k 206 1.0k 569 1 1.2k 159 6 322 2.4k

相关帖子

25 回帖
博客音乐插件，为你的博客增添乐趣

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • 88250 • • 1 赞同
    订阅者

    红山果这首歌不错 ❤️

  • someone1764 • via Linux

    前面两个都是 163 的 api 啊

    1 回复
  • csfwff • • 1
    捐赠者

    huaji 有些歌网易云不让外链

    3 回复
  • SherlockOuO •
    作者

    对，前两个是的。

  • SherlockOuO •
    作者

    对，这是最骚的

  • danl •

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

    1 回复
  • 233333 • • 1 赞同
    捐赠者

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

  • douniwan • • 1 赞同 via Android
    订阅者 支持者 捐赠者 勇士

    我发现用你博客那个东西可以无视网易云的限制，强制外链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>
​
  • douniwan •
    订阅者 支持者 捐赠者 勇士

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

    <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 回复
    1 引用
  • douniwan •
    订阅者 支持者 捐赠者 勇士

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

  • SherlockOuO •
    作者

    好嘞

  • cloudlang • via macOS
    支持者

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

  • SherlockOuO •
    作者

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

  • andyho •
    捐赠者

    MARK 🙏

  • gitsilence • via Linux

    看我博客上的 音乐播放器，非常优秀的一款音乐播放器。

    http://blog.lacknb.cn

请输入回帖内容 ...
SherlockOuO
明天就放假啦！！！ 雅安
回帖
30
 帖子
5
 积分
491