下面我将为你提供一个完整的、带有详细注释的网页源码,它可以模拟一个Qzone背景音乐查询工具。
（图片来源网络，侵删）
核心思路
- 模拟请求：我们的网页会模拟一个浏览器，向腾讯的服务器发送一个请求,请求获取指定QQ号的公开音乐信息。
- 解析数据：腾讯服务器会返回一个JSON格式的数据，里面包含了音乐列表、当前播放的歌曲ID、歌手、歌名等信息。
- 展示结果：我们将解析后的JSON数据,用友好的方式展示在网页上。
查询网页源码 (HTML + CSS + JavaScript)
这是一个可以直接保存为 .html 文件并在浏览器中打开使用的完整源码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Qzone 背景音乐查询工具</title>
<style>
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f0f2f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
/* 主容器 */
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
color: #1890ff;
margin-bottom: 20px;
}
/* 输入框样式 */
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
input[type="text"] {
width: 100%;
padding: 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box; /* 确保padding不会影响宽度 */
}
input[type="text"]:focus {
outline: none;
border-color: #40a9ff;
}
/* 按钮样式 */
button {
width: 100%;
padding: 12px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #40a9ff;
}
button:active {
background-color: #096dd9;
}
/* 结果区域样式 */
.result-container {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.result-container h2 {
font-size: 18px;
margin-bottom: 15px;
color: #333;
}
.music-info {
background-color: #fafafa;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #1890ff;
}
.music-info p {
margin: 5px 0;
line-height: 1.6;
}
.music-info strong {
color: #555;
}
/* 状态提示 */
.status {
text-align: center;
margin-top: 15px;
font-size: 14px;
color: #888;
}
.error {
color: #ff4d4f;
}
.loading {
color: #1890ff;
}
/* 初始隐藏 */
#resultArea {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>🎵 Qzone 背景音乐查询</h1>
<div class="input-group">
<label for="qqNumber">请输入要查询的QQ号：</label>
<input type="text" id="qqNumber" placeholder=" 12345678">
</div>
<button id="queryBtn">开始查询</button>
<div id="status" class="status"></div>
<div id="resultArea" class="result-container">
<h2>查询结果</h2>
<div id="musicInfo" class="music-info">
<!-- 音乐信息将在这里动态插入 -->
</div>
</div>
</div>
<script>
// 获取DOM元素
const queryBtn = document.getElementById('queryBtn');
const qqNumberInput = document.getElementById('qqNumber');
const statusDiv = document.getElementById('status');
const resultArea = document.getElementById('resultArea');
const musicInfoDiv = document.getElementById('musicInfo');
// 查询按钮点击事件
queryBtn.addEventListener('click', function() {
const qqNumber = qqNumberInput.value.trim();
// 简单的输入验证
if (!/^\d{5,12}$/.test(qqNumber)) {
showStatus('请输入有效的QQ号 (5-12位数字)', 'error');
return;
}
// 隐藏旧结果，显示加载状态
resultArea.style.display = 'none';
showStatus('正在查询中，请稍候...', 'loading');
// 构造API请求URL
// 注意：这个API地址可能会变化，如果失效需要寻找新的可用接口
const apiUrl = `https://cgi.music.qq.com/fcgi-bin/musicu.fcg?format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=0&uin=${qqNumber}`;
// 使用 Fetch API 发起请求
fetch(apiUrl)
.then(response => {
// 检查响应是否成功
if (!response.ok) {
throw new Error(`网络请求失败，状态码: ${response.status}`);
}
return response.json();
})
.then(data => {
// 解析返回的JSON数据
parseAndDisplayData(data);
})
.catch(error => {
// 捕获并显示错误
console.error('查询出错:', error);
showStatus('查询失败，可能是QQ号不存在或网络问题。', 'error');
});
});
// 解析数据并展示到页面上
function parseAndDisplayData(data) {
try {
// 数据结构较深，需要逐步解析
// data.data -> data.itemcd -> list -> [0] -> musicData
const musicList = data?.data?.itemcd?.list;
if (!musicList || musicList.length === 0) {
showStatus('该QQ号暂未设置公开背景音乐。', 'error');
return;
}
// 获取当前播放的音乐信息（通常是列表的第一首）
const currentMusic = musicList[0].musicData;
if (!currentMusic) {
showStatus('无法解析音乐数据。', 'error');
return;
}
const songName = currentMusic.songname || '未知歌曲';
const singerName = currentMusic.singer?.[0]?.name || '未知歌手';
const albumName = currentMusic.albumname || '未知专辑';
const songId = currentMusic.songid || '未知ID';
// 构建要显示的HTML
const infoHTML = `
<p><strong>歌曲：</strong>${songName}</p>
<p><strong>歌手：</strong>${singerName}</p>
<p><strong>专辑：</strong>${albumName}</p>
<p><strong>歌曲ID：</strong>${songId}</p>
`;
// 将HTML插入到结果区域
musicInfoDiv.innerHTML = infoHTML;
resultArea.style.display = 'block';
showStatus('查询成功！', 'success');
} catch (e) {
console.error('数据解析错误:', e);
showStatus('数据解析失败，可能是API结构已变更。', 'error');
}
}
// 显示状态信息
function showStatus(message, type) {
statusDiv.textContent = message;
statusDiv.className = 'status';
if (type) {
statusDiv.classList.add(type);
}
}
</script>
</body>
</html>
如何使用
- 保存代码：将上面的全部代码复制，粘贴到一个文本编辑器中（如 VS Code, Sublime Text, 或者记事本）。
- 保存文件：将文件另存为
qzone_music_query.html（文件名可以任意，但后缀必须是.html）。 - 打开网页：找到你保存的文件，用任意浏览器（如 Chrome, Firefox, Edge）打开它。
- 输入QQ号：在输入框中输入你想查询的、且设置了公开背景音乐的QQ号码。
- 点击查询：点击“开始查询”按钮，稍等片刻,结果就会显示在下方。
重要说明和注意事项
-
API的可用性：
- 这个工具的核心是向腾讯的一个公开API (
cgi.music.qq.com/...) 发送请求。这个接口地址随时可能被腾讯更改或废弃，如果有一天这个工具突然不工作了,大概率是这个地址失效了。 - 我已经为你注释了API地址，如果你发现它失效了，可以尝试在网上搜索新的“QQ音乐QQ号背景音乐API”来替换它。
- 这个工具的核心是向腾讯的一个公开API (
-
隐私和公开性：
- 此工具只能查询到设置了“对所有人可见”的背景音乐，如果用户的音乐设置是“仅好友可见”或“私密”，你将无法查询到任何信息，页面会提示“该QQ号暂未设置公开背景音乐”。
-
技术原理：
（图片来源网络，侵删）- 这个网页实际上是在做一件浏览器通常做的事情：当你访问一个有Qzone背景音乐的页面时，你的浏览器也会悄悄地向这个API地址请求数据,然后加载播放器。
- 我们把这个过程自动化并提取了出来，让你可以直接查询,而不需要访问对方的Qzone主页。
-
局限性：
- 它只能获取到当前播放列表的第一首歌的信息，也就是“正在播放”的那首。
- 它无法直接播放或下载音乐，只能获取元数据（歌名、歌手等）。
希望这个详细的源码和解释能帮到你！
