网易云音乐年终总结H5：音乐之旅的技术解析

是染染啊
647 阅读4分钟

网易云音乐年终总结 H5 页面技术解析

原创产品技术范

网易云音乐不仅在移动端和PC端有着优秀的用户体验，其HTML5版本同样表现出色。本文将深入解析网易云音乐年终总结H5页面的技术实现，从页面结构、CSS样式、DOM编程、音频控制到用户体验细节等方面进行详细说明。

页面展示

9d24b28bc207af737942a5e3fb67001.png

页面结构

网易云音乐的年终总结H5页面结构清晰，使用了Swiper插件来实现页面的垂直滑动效果。以下是页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐年终总结H5</title>
    <!-- 引入 Swiper 插件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <!-- 引入 css样式 -->
    <link rel="stylesheet" href="common.css">
    <!-- 设置全局样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <audio id="j-bgm" src="bgm.mp3"></audio>
    <div class="music-btn off"></div>
    <div class="next-view-c"></div>
    <!-- 划页操作 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="view index">
                    <div class="logo-c"></div>
                </div>
            </div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
        </div>
    </div>
    <!-- 引入 Swiper 插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script>
        // DOM 操作
        // 音乐的播放
        var audio = document.getElementById('j-bgm');
        // querySelector 选择器
        var btn = document.querySelector('.music-btn');
        btn.addEventListener('click', function() {
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
            btn.classList.toggle('off'); // 切换图标
        });
        // 滑屏
        new Swiper('.swiper-container', {
            direction: 'vertical' // 垂直滑动
        });
    </script>
</body>
</html>

CSS样式

全局样式

为了确保页面的一致性和整洁性，全局样式设置如下：

* {
    margin: 0;
    padding: 0;
}
特定样式

  • 音乐按钮：

    .music-btn {
  width: 50px;
  height: 50px;
  background: url(path/to/music-btn-on.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
}

.music-btn.off {
  background-image: url(path/to/music-btn-off.png);
}

在CSS中，虽然没有传统面向对象编程中的“多态”概念，但你可以通过类名的组合和切换来实现类似的效果。在.music-btn 和 .music-btn.off 的关系就体现了类似多态的设计思想。

类名组合：

当音乐按钮处于开启状态时，元素只包含 .music-btn 类。

当音乐按钮处于关闭状态时，元素同时包含 .music-btn 和 .off 类。

  • 滑屏按钮：

    .next-view-c {
  z-index: 999;
  background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/gx.4ae36e08269404412ecdb99e9453ca17.svg);
  background-size: 100%;
  left: 50%;
  bottom: 10px;
  width: 13px;
  height: 86px;
  position: fixed;
  transform: translate3d(-50%, 0, 0);
}

使用 transform3d 主要是为了利用硬件加速（尤其是GPU加速），从而提高页面的性能和流畅度。

  • 视图样式：

    .view {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.view.index {
  background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
  position: absolute;
  background-position: center;
  background-size: cover;
}

继承原理：
CSS里面虽然没有多态，这里却体现了多态里面非常重要的继承原理，这个类在继承 .view 类的基础上，添加了特定的背景图像和定位属性，使其更适合用于首页或其他特定视图。

DOM编程

音乐播放控制

通过DOM操作，实现音乐播放和暂停的功能：

var audio = document.getElementById('j-bgm');
var btn = document.querySelector('.music-btn');

btn.addEventListener('click', function() {
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
    }
    btn.classList.toggle('off');
});

  1. 选择器：

    • 使用 document.querySelector('.music-btn') 可以确保无论按钮当前是否有 off 类名，都能正确获取到这个元素。
    • 如果使用 document.querySelector('.off')，那么在按钮没有 off 类名时（即按钮处于开启状态时），将无法获取到这个元素。

  2. 动态切换：

  • 通过 btn.classList.toggle('off') 方法，可以在点击按钮时动态添加或移除 off 类名，从而改变按钮的状态。
  • toggle 方法的作用是：如果元素已经包含指定的类名，则移除该类名；如果元素不包含指定的类名，则添加该类名。
滑屏操作

使用Swiper插件实现页面的垂直滑动效果：

new Swiper('.swiper-container', {
    direction: 'vertical' // 垂直滑动
});

用户体验细节

用户友好设计

网易云音乐始终把用户放在第一位，即使是最简单的功能也经过精心设计。例如，在音乐播放控制中，提供一个清晰的指示器，让用户知道当前的状态。

<div class="next-view-c"></div>

 .next-view-c {
    z-index: 999;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/gx.4ae36e08269404412ecdb99e9453ca17.svg);
    background-size: 100%;
    left: 50%;
    bottom: 10px;
    width: 13px;
    height: 86px;
    position: fixed;
    /* 网页的性能 transform3d 会开启 gpu 加速  
      gpu 利用显存计算页面
    */
    transform: translate3d(-50%, 0, 0);
  }

展示效果：

image.png

小白友好

为了让所有用户都能轻松使用，网易云音乐尽量简化操作流程，减少复杂的设置和选项。即使是初次使用的用户，也能快速上手。

结语

网易云音乐的年终总结H5页面不仅在技术上实现了高质量的用户体验，还在细节上充分考虑了用户的实际需求。通过不断的技术创新和优化，网易云音乐将继续为用户提供更加丰富和便捷的音乐服务。希望本文的解析能帮助读者更好地理解和应用这些技术，提升自己的开发水平。

avatar
文章
阅读
粉丝