开摆做个网易Music页面

ys指风不买醉
339 阅读5分钟

本项目为网易云音乐的HTML5页面开发实践，旨在通过创建一个简单的音乐播放器页面，掌握H5页面的基本构建方法和技术应用。此页面包括音乐播放控制、页面滑动效果等功能，并且注重移动端适配及优化今天实现网易云歌单页面，探讨一下实现细节

image.png

这一天是程序员特殊的日子，网易公司大发慈悲允许程序猿肖摆摆 上班时间开摆，自己做个音乐页面，展现程序员独特的审美魅力。肖摆摆，二话不说，把网易云音乐配合上网易vlog进行页面设计。他一挥手设计出HTML5页面，但是遇到css修改页面渲染属性就不得不多摸摸光秃秃的脑袋了。‘叮叮’ ~~ 原来是直接设置的最后5分钟下班铃声响了。看着，差不多渲染好的页面，肖摆摆做了最后的冲刺——把页面改成滑屏式，配合iPhone 手机 750px 标准调整了格式....

故事后面其实还没完。但是废话不多说，进入网易Music页面看看去吧

详细代码移步 github

一、先上代码

  • HTML结构：建立index.html文件，主要设计操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易music</title>
     <!-- 引入 Swiper 库的 CSS 文件，用于实现滑动效果。 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="./common.css">
    
</head>
<body>
    <audio id="j-bjm" src="./bgm.mp3" ></audio>
    <div class="next-view-c"></div>
    <!-- 音乐按钮 点击事件进行控制 -->
    <div class="music-btn off"></div>

    <!-- 划页效果 -->
    <div class="swiper-container">
        <!-- Swiper 容器的包装元素，包含多个滑动页面 -->
        <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>
    </div>
    <!-- 引入 Swiper 库的 JavaScript 文件，用于实现滑动效果 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script>
        // dom 操作，id 和 类名selector 选择器
        // id 获取音乐元素j-bjm,通过类选择器获得 music-btn 按钮 
        const audio = document.getElementById('j-bjm');
        const musicBtn = document.querySelector('.music-btn');
       
        musicBtn.addEventListener('click',function() {
            if(audio.paused) { //暂停
                audio.play();
            }else {
                audio.pause();
            }
            musicBtn.classList.toggle('off'); // 切换类名
        });

        // <!-- 滑屏 使用 Swiper 库创建一个垂直方向的滑动页面 -->
        new Swiper('.swiper-container',{
            direction: 'vertical'
        })
    </script>
</body>
</html>

  • CSS样式：建立common.css文件，渲染页面

    * {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
.music-btn {
    z-index: 999;
    position: fixed;
    top: 25px;
    left: 25px;
    width: 40px;
    height: 40px;
    background: url(./assert/assert/close.png) no-repeat center / cover;
}
.music-btn.off {
    background-image: url(./assert/assert/music.png);
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background-color: green;
}
.swiper-slide:nth-child(odd) {
    background-color: pink;
}
.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);
}
.view {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.view.index {
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
    background-size: cover;
    background-position: center;
}
.logo-c {
    position: absolute;
    top: 5.6%;
    right: 15%;
    width: 186px;
    height: 218px;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png) no-repeat;
    background-size: 100%;
}

二、技术要点

1. H5基础

  • 手机网页特性 模拟器调试：

    • 在开发过程中，需要考虑不同设备的屏幕分辨率，确保页面在各种设备上的良好展示。

    • 开发阶段可以通过模拟器进行本地调试，通常依据iPhone标准尺寸750px进行设计。

    • 对于Retina屏幕等高清设备，实际物理宽度可能达到1500px，此时1个物理点对应多个像素（如2px）。

    • 最终需在真实设备上测试，确保交互流畅性和视觉效果。

    • H5页面适用于移动设备，易于通过社交媒体分享，形成病毒式传播。

2. Audio元素

  • 音乐播放限制：

    • 近年来，为了防止未经用户许可的音频自动播放，浏览器对<audio>标签的使用施加了限制，要求必须由用户操作触发播放。
    • 可以通过JavaScript调用play()方法来启动音乐播放，但前提是用户已执行过页面内的某个动作，如点击按钮。
3. DOM操作

  • 获取DOM元素：

    • document.getElementById('id')：通过ID获取单个元素。
    • document.querySelector('选择器')：根据CSS选择器获取第一个匹配的元素。

  • 添加事件监听：

    • 使用addEventListener方法为DOM元素添加事件监听器，如点击事件。
4. CSS高级技巧

  • 类名切换：

    • classList.toggle用于切换元素的类名，常用于状态切换场景，如播放/暂停按钮的状态管理。
    • 示例中，点击音乐按钮时，通过切换.off类名改变按钮图标。

  • 背景设置：

    • background-size: cover;使背景图片等比例缩放至完全覆盖背景区域。
    • background-position: center;确保背景图片在容器中居中显示。

  • GPU加速[得懂]：

    • 虽然transform也是水平滑动，使用transform: translate3d(x, y, z)可以触发GPU加速，提高动画性能。

    • 结合left: 50%; transform: translate3d(-50%, 0, 0);实现元素水平居中定位。

    • 用* 设置padding和margin，重置默认样式，统一页面外观。

    • 定义音乐按钮、滑动页面等组件的样式，注意使用适当的层级关系（如z-index）保证元素正确显示。

6. 补充设计模式

  • 封装：

    • 将相似的功能或数据封装成函数或对象，对外提供简洁的接口，减少外部依赖。
    • 如音频播放逻辑可封装为单独的模块。

  • 继承：

    不同的页面组件可以继承自基类，共享通用属性和方法。例如：CSS 可以通过一些方式来模拟继承的效果：

    • 1.元素继承：某些 CSS 属性会自动从父元素继承到子元素，例如 color、font-family、font-size 等。例如：
// 在这个 HTML 示例中，`<p>` 元素会继承 `<div>` 元素的 `color` 属性。
 <div style="color: red;">
      <p>This paragraph will inherit the red color from its parent div.</p>
    </div>
  • 2.类继承（通过组合） ：可以通过组合多个类来模拟继承，例如：

.base-class {
  font-size: 16px;
  color: blue;
}
.derived-class {
  /* 继承 base-class 的属性 */
  font-size: inherit;
  color: inherit;
  /* 添加自己的属性 */
  background-color: yellow;
}

  • 多态：

    • 允许子类重写父类的方法，实现相同接口下的不同行为。
    • 在本项目中，音乐按钮的不同状态（播放/暂停）可通过切换类名实现外观变化，体现了多态性。

人家准点下班了。肖摆摆的故事还在继续...

avatar
文章
阅读
粉丝