音乐流媒体网页播放器
我们为音乐服务打造了一款专门面向特定曲风用户的网页播放器。用户直接在网页浏览器中收听,如果播放操作和当前状态不能一目了然,就会在听歌途中到处翻找。我们开发了整个播放器界面:播放、停止、跳转、状态显示等基本操作,播放列表界面与顺序管理,以及按钮和状态的呈现。
在网页浏览器中直接收听的曲风专用播放器
曲风专用网页播放器是音乐服务为喜爱某一曲风的用户单独准备的服务。为了让用户直接在网页浏览器中收听,我们实现了在浏览器内播放的播放器界面。目标是一个身在网页之中、却像安装版音乐程序一样运行的播放器。

具备播放、停止、跳转与状态显示的基本操作
网页播放器的基本操作是播放、停止、跳转,以及显示当前状态。我们逐一开发了媒体播放器的基本操作流程,让用户按下按钮时,界面立刻告诉他们播放器正在做什么。 播放状态要立刻显示在界面上,用户才不会在等待声音时重复按同一个按钮。

边看曲目边安排顺序的播放列表
播放列表是用户确认要听的曲目并管理播放顺序的界面。我们把显示曲目的界面与管理播放顺序的操作一起实现。列表必须区分正在播放的曲目和下一首,用户才能跟上播放顺序。

按下的按钮与选中的曲目一眼可见的状态呈现
音乐播放器必须在界面上清楚显示是否正在播放、选中了哪首歌。我们设计了播放器界面及其反馈,让操作按钮、播放状态和选中状态都直观可读。我们还打磨了界面的动态,让播放器即使在网页中也像安装版程序一样响应。

项目亮点
在浏览器中直接收听的曲风专用网页播放器
播放、停止、跳转与播放状态显示
查看曲目并管理播放顺序的播放列表
洞察
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



