侧边栏壁纸

一款音乐播放器,可以加到博客或者html里面

2024年03月15日 1.1k阅读 0评论 3点赞

播放器至少需要三个参数:

  • server 指定调用的 API ,可选 netease, tencent, kugou, xiami, baidu ,分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
  • type 指定调用类型,可选 song, playlist, album, search, artist ,分别对应单曲、歌单、专辑、搜索结果、艺术家
  • id 指定调用的 id ,一般可以在地址栏中找到

音乐id怎么找

  • 网易云id演示如下,其他id同样如此,记住上面的三个参数要改对即可
如图:

网易云id

代码如下:

<!-- 音乐播放器 -->
<link rel="stylesheet" href="https://music.cenguigui.cn/player/css/cenguigui.css">
<script>
    // 音乐设置
    let meting_music_api = "https://music.cenguigui.cn/";// meting api
    let music_server = "netease"; // 音乐服务:网易云 netease 参见 meting api支持的服务
    let music_type = "playlist"; // 歌曲类型:歌单playlist 单首歌曲 song  专辑 album
    let music_id = "7668704846"; // 歌单ID或歌曲ID或者专辑ID 20173709 29732992
    let music_order = "list"; // 音频循环顺序, 顺序播放: 'list', 随机播放:'random'
    let music_mini = false; // mini模式 吸底模式开启后此选项实效 true / false
    let music_fixed = true; // 吸底模式
    let music_volume = 0.7; // 默认音量
    let music_autoplay = true; // 自动播放
    let music_loop = "all"; // 音频循环播放, 可选值: 'all', 'one', 'none' ,分别为全部循环,单曲循环,不循环
</script>
<div id="aplayer-fixed" class="aplayer"></div>
<script src="https://music.cenguigui.cn/player/js/jquery.min.js"></script>
<script src="https://music.cenguigui.cn/player/js/APlayer.min.js"></script>
<script src="https://music.cenguigui.cn/player/js/main.js"></script>
<!-- 音乐播放器 end -->

第二种

<!--网易云音乐-->
<meting-js 
    fixed="true" 
    preload="metadata" 
    mutex="true" 
    volume="0.3" 
    autotheme="true" 
    storage="AllFixed" 
    order="random" 
    server="netease" 
    type="playlist" 
    id="7757541927" 
    autoplay="true">
<!--server="netease" 表示网易云    type="playlist"表示歌单    
id=7668704846是歌单的id,用电脑打开网易云找个歌单就能看到 -->
<!--用电脑打开网易云音乐选择你喜欢的歌单复制id后面的数字替换上面的7757541927即可-->
</meting-js>
<!--网易云音乐   end-->
<!-- 播放器样式 -->
<link rel="stylesheet" href="https://music.cenguigui.cn/player/css/cenguigui.css">
<script src="https://music.cenguigui.cn/player/js/APlayer.min.js"></script>
<script src="https://music.cenguigui.cn/player/js/Meting.min.js"></script>
<!-- 播放器样式 end-->

第三种链接式的

  • 链接歌单或者歌曲链接都可
  • 也可以选择自己的歌单
  • 链接怎么看?如下面图所示,演示的是QQ音乐
如图:

选择自己喜欢的歌单

然后复制链接

代码如下:

<meting-js 
auto="https://y.qq.com/n/yqq/playlist/7713574197.html" 
fixed="true">
<!--auto表示链接地址或者音乐地址    fixed="true"是让播放器变成迷你型-->
 </meting-js>
<!-- 播放器样式 -->
<link rel="stylesheet" href="https://music.cenguigui.cn/player/css/cenguigui.css">
<script src="https://music.cenguigui.cn/player/js/APlayer.min.js"></script>
<script src="https://music.cenguigui.cn/player/js/Meting.min.js"></script>
<!-- 播放器样式 end-->

本页面下面有演示,可以体验下

地址:演示地址

  • 或者就在这个页面最下面有个内嵌的音乐
3
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
舔狗日记