运维世界

large picture of the cover

如何给任何网站加背景音乐指南

一、引言

网站背景音乐能够为网站增添氛围，提升用户的沉浸感，尤其在创意、艺术或娱乐类网站中非常有效。它能使网站内容更加生动，增强用户的情感体验。例如，在个人博客或者作品展示网站中，合适的背景音乐可以使访客更好地理解你的风格和个性。类似的教程之前还分享过明月浩空
音乐播放器有兴趣的可以了解下

image-1758176834077.png

二、准备条件

2.1下载音乐代码
点我下载
2.2服务器
如需要vps部署网站的可以了解下
莱卡云官网

三、操作步骤

3.1下载之后解压打开代码文件

image-1758176556399.png

功能说明

fixed="true"：播放器固定位置，不随页面滚动。

autoplay="false"：加载时不自动播放。

theme="#409EFF"：播放器主题颜色为蓝色。

list-folded="true"：歌单默认折叠，用户需要点击展开。

auto这里配置自己想听的网易云音乐歌单即可

image-1758177236902.png

auto="https://music.163.com/#/discover/toplist?id=991319590"

3.2将代码加入网页中即可

方法1

：将代码加入 <head>和<body> 中

在 <head> 中引入必要的 CSS 和 JS 文件，然后在 <body> 中放置播放器容器。由于播放器容器通常需要放置在页面内容中，建议在 <body> 内使用 div 来显示播放器，而不是直接在 <head> 中。

image-1758177511718.png

如果以上不行或者有别的问题可以采用方法2或者3

方法2

：将代码只加入 <head> 中

image-1758179733307.png
image-1758177772851.png

方法3

：将代码只加入 <body> 中

image-1758177835063.png

四、网站示例

4.1halo1

image-1758179266213.png
显示成功

image-1758179299616.png

4.2halo2

halo2很多主题自带这个

image-1758179427257.png
如果不带的话自行添加

image-1758179481740.png
显示成功

image-1758179551053.png

4.3alist或者openlist

image-1758179733307.png
显示成功

image-1758179770607.png

4.4短链接网站

image-1758180048957.png
显示成功

image-1758180083855.png
补充中
。。。。。。。。。。。、。

==有任何问题可以直接留言或者问我==
==有任何问题可以直接留言或者问我==
==有任何问题可以直接留言或者问我==

欢迎关注我们的微信公众号！
微信公众号

site logo

Hi,Friend

© 2025 运维世界