在这个数字音乐盛行的时代，每个人都有自己的音乐品味。而打造一个专属自己的音乐网页，不仅可以展示自己的音乐喜好，还能与朋友分享。本文将教你如何利用HTML5技术，轻松制作一个个性化的QQ音乐网页。

了解HTML5

HTML5是当前网页制作的主流技术之一，它具有丰富的功能和强大的兼容性。通过HTML5，你可以实现音频播放、动画效果、交互式元素等多种功能，让你的网页更加生动有趣。

制作QQ音乐网页的步骤

1. 准备工作

在开始制作之前，你需要准备以下工具：

  • 文本编辑器（如Sublime Text、Visual Studio Code等）
  • 浏览器（如Chrome、Firefox等）
  • QQ音乐API（用于获取歌曲信息）

2. 创建基本结构

首先，我们需要创建一个基本的网页结构。在文本编辑器中输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的音乐盛宴</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的音乐盛宴</h1>
    </header>
    <main>
        <!-- 音乐列表 -->
        <div class="music-list">
            <!-- 歌曲信息 -->
        </div>
    </main>
    <footer>
        <p>版权所有 &copy; 2021 我的音乐盛宴</p>
    </footer>
</body>
</html>

3. 设计样式

接下来，我们需要为网页添加样式。在同一个目录下创建一个名为style.css的文件，并输入以下代码：

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

main {
    padding: 20px;
}

/* 音乐列表样式 */
.music-list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.music-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.music-item:hover {
    background-color: #f9f9f9;
}

4. 添加音乐列表

现在，我们需要向音乐列表中添加歌曲。首先，在QQ音乐官网搜索你喜欢的歌曲，并找到歌曲的ID。然后，使用以下代码获取歌曲信息：

// 获取歌曲信息
function getMusicInfo(musicId) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://u.y.qq.com/cgi-bin/musicu.fcg?format=json&data={musicId}', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            var musicList = document.querySelector('.music-list');
            var musicItem = document.createElement('div');
            musicItem.className = 'music-item';
            musicItem.innerHTML = `
                <p>${data.songinfo.songname}</p>
                <p>${data.songinfo.singer}</p>
            `;
            musicList.appendChild(musicItem);
        }
    };
    xhr.send();
}

// 获取歌曲列表
function getMusicList() {
    var musicIds = ['song1', 'song2', 'song3']; // 替换为你的歌曲ID
    for (var i = 0; i < musicIds.length; i++) {
        getMusicInfo(musicIds[i]);
    }
}

getMusicList();

5. 完善音乐播放功能

为了更好地体验音乐，我们可以在网页中添加音乐播放功能。以下是一个简单的音乐播放器示例：

<!-- 音乐播放器 -->
<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

将音乐播放器添加到音乐列表中，并替换src属性中的song.mp3为你的歌曲链接。

总结

通过以上步骤，你已经成功制作了一个个性化的QQ音乐网页。你可以根据自己的喜好调整样式、添加功能，让你的音乐盛宴更加精彩。祝你在音乐的世界里尽情畅游！