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

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

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

展示:我的博客

  • 插件
    64 引用 • 278 回帖
  • 音乐

    你听到信仰的声音了么?

    58 引用 • 507 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • SherlockOuO
    作者

    对,前两个是的。

  • 其他回帖
  • 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>
    
  • csfwff 1

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

    1 回复
  • happinesslijian

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

    1 回复
  • 查看全部回帖