---
title: "首页那个音乐播放器是怎么做出来的"
date: 2026-08-12
category: "前端与体验"
---

# 首页那个音乐播放器是怎么做出来的

首页右下角有个小播放器，可以搜索网易云的歌、扫码登录自己的账号，切页面的时候歌不会断。

写它的初衷很简单：我写博客的时候喜欢放歌，希望读者也是。

## 不断歌的关键是位置

站内导航是无刷新的，切换只替换内容区。播放器只要放在内容区之外，就天然不会被打断。

所以它的挂载点是一个独立的容器，和导航、页脚同级。切页的时候内容区换掉了，播放器连 DOM 都没动。

## 接口代理

前端不直连网易云的接口，中间隔了一层自己的代理：搜索、歌词、播放地址都从代理走。

好处是账号的 Cookie 保存在服务端，前端拿不到；坏处是多了一跳。实测延迟可以接受。

## 真正麻烦的三件事

一是自动播放限制。浏览器不允许页面加载就出声，所以播放器默认暂停，等用户点一下才开始。

二是歌词同步。接口给的是逐行时间戳，滚动容器要用 transform 而不是改 scrollTop，不然歌词会抖。

三是切页后的状态恢复。音量、进度、播放队列都存在本地，切页回来读一遍恢复现场。

## 一个取舍

播放器常驻意味着每次进站都会多加载一些脚本。我把它们全部合并压缩，控制在几十 KB，实测对首屏影响很小。

音乐不是博客的必需品，但它是这个站点里我最喜欢的部分。