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

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

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

展示:我的博客

  • 插件
    98 引用 • 575 回帖 • 3 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • gitsilence

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

    http://blog.lacknb.cn

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

    <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 回复
  • csfwff 1

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

    1 回复
  • cloudlang

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

  • 查看全部回帖