当前位置：首页 > 行业动态 > 正文

html5音乐相册网站源码

admin
行业动态
2025-05-06
3

基于HTML5+CSS3+JS框架（Vue/React）构建响应式音乐相册，集成Howler.js音频API实现背景音乐自动播放，支持图片轮播与点击暂停音乐交互，数据通过LocalStorage/IndexedDB存储或对接后端接口，可部署至静态托管平台

网站结构说明

页面基础结构

使用HTML5语义化标签构建页面框架，包含头部导航、主体内容区和底部版权信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">音乐相册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>时光记忆</h1>
        <div class="audio-controls">
            <button id="playBtn">播放</button>
            <button id="pauseBtn">暂停</button>
        </div>
    </header>
    <main>
        <div class="album-container">
            <!-图片列表 -->
            <img src="images/pic1.jpg" alt="照片1" class="active">
            <img src="images/pic2.jpg" alt="照片2">
            <img src="images/pic3.jpg" alt="照片3">
        </div>
    </main>
    <footer>
        <p>© 2023 音乐相册</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

样式设计（CSS3）

使用Flexbox布局和过渡动画实现响应式设计

html5音乐相册网站源码第1张

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
}
header {
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}
.audio-controls button {
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
}
.album-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}
.album-container img {
    width: 300px;
    height: 200px;
    margin: 10px;
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0.8;
}
.album-container img.active {
    transform: scale(1.1);
    opacity: 1;
}

交互功能（JavaScript）

实现音频播放控制与图片轮播同步

document.addEventListener('DOMContentLoaded', function() {
    const audio = new Audio('audio/bgm.mp3');
    const playBtn = document.getElementById('playBtn');
    const pauseBtn = document.getElementById('pauseBtn');
    const images = document.querySelectorAll('.album-container img');
    let currentIndex = 0;
    // 音频控制
    playBtn.addEventListener('click', () => {
        audio.play();
        cycleImages();
    });
    pauseBtn.addEventListener('click', () => {
        audio.pause();
    });
    // 图片轮播
    function cycleImages() {
        audio.addEventListener('timeupdate', () => {
            let progress = audio.currentTime / audio.duration;
            currentIndex = Math.floor(progress  images.length);
            images.forEach((img, index) => {
                img.classList.remove('active');
                if(index === currentIndex) {
                    img.classList.add('active');
                }
            });
        });
    }
});

核心功能对照表

功能模块	实现方式	技术要点
音频播放控制	HTML5 `<audio>` 元素 + JavaScript	播放/暂停事件监听
图片轮播	CSS类切换 + JavaScript定时器	动态class控制显示效果
视听同步	音频时间进度匹配图片索引	时间比例计算
响应式布局	CSS媒体查询 + Flexbox	不同屏幕尺寸适配
动画过渡	CSS3 `transition` 属性	图片缩放/透明度渐变