音楽ストリーミングのウェブプレーヤー
音楽サービスが特定ジャンルの利用者向けに別途提供した専用ウェブプレーヤーを作りました。利用者はWebブラウザですぐに音源を聴くため、再生操作と今の状態がひと目で分からないと、聴いている途中で画面を探し回ることになります。再生・停止・移動・状態表示といった基本操作、再生リストの画面と順序の管理、ボタンと状態の表現まで、プレーヤー画面全体を開発しました。
Webブラウザですぐ聴けるジャンル専用プレーヤー
ジャンル専用ウェブプレーヤーは、音楽サービスが特定ジャンルを楽しむ利用者のために別途用意したサービスです。利用者がWebブラウザですぐに音源を聴けるよう、ブラウザの中で再生されるプレーヤー画面を実装しました。Webページの中にありながら、インストール型の音楽プログラムのように動くプレーヤーを目指しました。

再生・停止・移動と状態表示を備えた基本操作
ウェブプレーヤーの基本操作は、再生、停止、移動、そして今の状態を知らせる表示です。メディアプレーヤーの基本操作の流れを一つずつ開発し、利用者がボタンを押したとき、プレーヤーが何をしているかを画面がすぐ知らせるようにしました。 再生状態がすぐ画面に見えてこそ、利用者は音が出るのを待ちながら同じボタンをもう一度押さずに済みます。

曲目を見ながら順序を決める再生リスト
再生リストは、利用者が聴く曲を確認し、再生順を管理する画面です。曲目を見せる画面と、再生順を管理する操作を一緒に実装しました。リストの中で今再生中の曲と次の曲が区別できてこそ、利用者は順序を追えます。

押したボタンと選んだ曲がすぐ分かる状態表現
音楽プレーヤーは、今再生中かどうか、どの曲を選んだかが画面にはっきり表れなければなりません。操作ボタン、再生状態、選択状態を直感的に表現するよう、プレーヤー画面と反応を設計しました。Webの中でもインストール型のプログラムのように反応するプレーヤーになるよう、画面の動きを整えました。

この仕事のポイント
ブラウザですぐ聴けるジャンル専用ウェブプレーヤー
再生・停止・移動と再生状態の表示
曲目を確認し再生順を管理する再生リスト
インサイト
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…



