在这个数字音乐盛行的时代，拥有一个个性化的音乐播放网页无疑能让你在众多音乐爱好者中脱颖而出。今天，我们就来一起学习如何使用HTML5打造一个仿百度音乐风格的网页。以下是详细的实战攻略，让你轻松上手。

一、准备工作

在开始之前，我们需要准备以下工具和资源：

  1. 文本编辑器：如Visual Studio Code、Sublime Text等。
  2. 音乐资源：可以从合法的音乐平台获取，如网易云音乐、QQ音乐等。
  3. 图片素材：用于网页的背景、图标等。

二、HTML5结构搭建

1. 网页头部

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>仿百度音乐风格网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>我的音乐天地</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">歌手</a></li>
                <li><a href="#">专辑</a></li>
            </ul>
        </nav>
    </header>
    <!-- 网页主体内容 -->
</body>
</html>

2. 网页主体

<section class="container">
    <aside class="sidebar">
        <!-- 侧边栏内容，如搜索框、推荐歌曲等 -->
    </aside>
    <main class="main-content">
        <!-- 主内容区域，如歌曲列表、播放器等 -->
    </main>
</section>

3. 网页底部

<footer>
    <p>版权所有 &copy; 2023 我的音乐天地</p>
</footer>

三、CSS样式设计

1. 网页整体布局

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

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

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.sidebar {
    float: left;
    width: 20%;
    background-color: #ddd;
    padding: 10px;
}

.main-content {
    float: right;
    width: 75%;
    padding: 10px;
}

2. 播放器样式

.player {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.player h2 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.player .controls {
    margin-top: 10px;
}

.player .controls button {
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.player .controls button:hover {
    background-color: #555;
}

.player .progress {
    width: 100%;
    height: 5px;
    background-color: #ddd;
    margin-top: 10px;
}

.player .progress .progress-bar {
    width: 0%;
    height: 100%;
    background-color: #333;
}

四、JavaScript功能实现

1. 播放器控制

// 播放器对象
var player = {
    audio: document.querySelector('.player audio'),
    progressBar: document.querySelector('.player .progress-bar'),
    playBtn: document.querySelector('.player .controls button'),
    currentTime: 0,
    duration: 0,
    init: function() {
        this.updateProgress();
        this.playBtn.addEventListener('click', this.togglePlay);
    },
    togglePlay: function() {
        if (player.audio.paused) {
            player.audio.play();
            player.playBtn.textContent = '暂停';
        } else {
            player.audio.pause();
            player.playBtn.textContent = '播放';
        }
    },
    updateProgress: function() {
        player.currentTime = player.audio.currentTime;
        player.duration = player.audio.duration;
        player.progressBar.style.width = (player.currentTime / player.duration) * 100 + '%';
    }
};

player.init();

2. 音乐列表展示

// 音乐列表数据
var musicList = [
    {
        title: '歌曲1',
        artist: '歌手1',
        src: 'path/to/music1.mp3'
    },
    {
        title: '歌曲2',
        artist: '歌手2',
        src: 'path/to/music2.mp3'
    }
];

// 渲染音乐列表
function renderMusicList() {
    var musicListEl = document.querySelector('.main-content ul');
    musicListEl.innerHTML = '';
    musicList.forEach(function(item) {
        var li = document.createElement('li');
        li.innerHTML = `<span>${item.title}</span> - <span>${item.artist}</span>`;
        musicListEl.appendChild(li);
    });
}

renderMusicList();

五、总结

通过以上实战攻略，相信你已经学会了如何使用HTML5打造一个仿百度音乐风格的网页。在实际开发过程中，你可以根据自己的需求进行扩展和优化。祝你创作愉快！