Skip to content

Commit 6f459e3

Browse files
The-InfinitysThe-Infinitys
committed
音楽プレイヤーを実装！
1 parent 39e0079 commit 6f459e3

File tree

16 files changed

+852
-3
lines changed

16 files changed

+852
-3
lines changed

‎public/music/encourage/encourage.m4a‎

4.78 MB
Binary file not shown.

‎public/music/encourage/jacket.jpeg‎

477 KB
Loading

‎public/music/encourage/music.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"date":"2024-11-15",
3+
"title":"Encourage",
4+
"artist":"The Infinity's"
5+
}

‎public/music/moonday/jacket.jpeg‎

180 KB
Loading

‎public/music/moonday/moonday.m4a‎

4.66 MB
Binary file not shown.

‎public/music/moonday/music.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"artist":"The Infinity's",
3+
"title":"Moon Day",
4+
"date":"2025-10-20"
5+
}

‎src/app/globals.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
--primary: #eeeeee;
77
--link-color: #0000ff;
88
--body-color-value: 0deg;
9-
/* ライトテーマ用のリンク色を追加 */
9+
--secondary: color-mix(in srgb, var(--foreground), var(--background) 50%);
10+
/* ライトテーマ用のリンク色を追加 */
1011
}
1112

1213
* {

‎src/app/layout/header.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ const menus_list = [
2424
target: "_self",
2525
label: "Articles",
2626
},
27+
{
28+
name: "Musics",
29+
link: "/music",
30+
target: "_self",
31+
label: "Musics",
32+
},
2733
{
2834
img: TheInfiniteX,
2935
link: "https://x.com/The_Infinity_s/",

‎src/app/music/[music_id]/page.module.css‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
.music-player-container {
2+
position: relative;
3+
width: 100%;
4+
height: 100vh;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
padding: 2rem;
10+
overflow: hidden;
11+
color: var(--foreground);
12+
}
13+
14+
.jacket-background {
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
width: 100%;
19+
height: 100%;
20+
z-index: 0;
21+
}
22+
23+
.jacket-image {
24+
object-fit: cover;
25+
filter: blur(20px);
26+
opacity: 0.5;
27+
transform: scale(1.1);
28+
}
29+
30+
.jacket-overlay {
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
width: 100%;
35+
height: 100%;
36+
background: linear-gradient(to bottom,
37+
color-mix(in srgb, var(--background), transparent 70%) 0%,
38+
color-mix(in srgb, var(--background), transparent 50%) 50%,
39+
color-mix(in srgb, var(--background), transparent 70%) 100%);
40+
}
41+
42+
.music-info {
43+
text-align: center;
44+
margin-bottom: 2rem;
45+
z-index: 1;
46+
text-shadow: 0 2px 4px color-mix(in srgb, var(--background), transparent 50%);
47+
}
48+
49+
.music-info h1 {
50+
font-size: 2.5rem;
51+
margin-bottom: 0.5rem;
52+
font-weight: bold;
53+
color: var(--foreground);
54+
}
55+
56+
.music-info p {
57+
font-size: 1.2rem;
58+
opacity: 0.9;
59+
color: var(--foreground);
60+
}
61+
62+
.player-controls {
63+
display: flex;
64+
flex-direction: column;
65+
align-items: center;
66+
gap: 1.5rem;
67+
width: 100%;
68+
max-width: 600px;
69+
z-index: 1;
70+
background: color-mix(in srgb,var(--background),transparent 50%);
71+
padding: 2rem;
72+
border-radius: 1rem;
73+
backdrop-filter: blur(10px);
74+
}
75+
76+
.time-control {
77+
display: flex;
78+
align-items: center;
79+
gap: 1rem;
80+
width: 100%;
81+
}
82+
83+
.time-control span {
84+
font-size: 0.9rem;
85+
min-width: 3rem;
86+
text-align: center;
87+
color: var(--foreground);
88+
opacity: 0.9;
89+
}
90+
91+
.play-button {
92+
padding: 1rem;
93+
background-color: var(--primary);
94+
color: var(--foreground);
95+
border: none;
96+
border-radius: 50%;
97+
cursor: pointer;
98+
transition: all 0.2s;
99+
width: 64px;
100+
height: 64px;
101+
display: flex;
102+
align-items: center;
103+
justify-content: center;
104+
}
105+
106+
.play-button:hover {
107+
background-color: var(--foreground);
108+
color:var(--background);
109+
transform: scale(1.05);
110+
box-shadow: 0 4px 12px color-mix(in srgb,var(--background),transparent 20%);
111+
}
112+
113+
.time-slider {
114+
flex: 1;
115+
height: 4px;
116+
-webkit-appearance: none;
117+
appearance: none;
118+
background: color-mix(in srgb,var(--foreground),transparent 20%);
119+
border-radius: 2px;
120+
outline: none;
121+
cursor: pointer;
122+
}
123+
124+
.time-slider::-webkit-slider-thumb {
125+
-webkit-appearance: none;
126+
width: 16px;
127+
height: 16px;
128+
background: var(--primary);
129+
border-radius: 50%;
130+
cursor: pointer;
131+
transition: transform 0.1s;
132+
box-shadow: 0 2px 4px color-mix(in srgb,var(--background),transparent 20%);
133+
}
134+
135+
.time-slider::-webkit-slider-thumb:hover {
136+
transform: scale(1.2);
137+
background: var(--foreground);
138+
}
139+
140+
.spectrum {
141+
position: fixed;
142+
top: 0;
143+
left: 0;
144+
width: 100%;
145+
height: 100%;
146+
z-index: 0;
147+
mix-blend-mode: screen;
148+
}
149+
150+
.control-buttons {
151+
display: flex;
152+
gap: 1rem;
153+
margin-bottom: 1rem;
154+
}
155+
156+
.control-button {
157+
background: color-mix(in srgb,var(--background),transparent 10%);
158+
border: none;
159+
border-radius: 50%;
160+
width: 48px;
161+
height: 48px;
162+
display: flex;
163+
align-items: center;
164+
justify-content: center;
165+
cursor: pointer;
166+
transition: all 0.3s ease;
167+
color: var(--foreground);
168+
}
169+
170+
.control-button:hover {
171+
background: var(--primary);
172+
transform: scale(1.1);
173+
}
174+
175+
.playback-rate-control {
176+
display: flex;
177+
gap: 0.5rem;
178+
margin-bottom: 1rem;
179+
}
180+
181+
.rate-button {
182+
background: color-mix(in srgb,var(--background),transparent 10%);
183+
border: none;
184+
border-radius: 4px;
185+
padding: 0.5rem 1rem;
186+
cursor: pointer;
187+
transition: all 0.3s ease;
188+
color: var(--foreground);
189+
font-size: 0.8rem;
190+
}
191+
192+
.rate-button:hover {
193+
background: var(--primary);
194+
}
195+
196+
.rate-button.active {
197+
background: var(--primary);
198+
font-weight: bold;
199+
}

‎src/app/music/[music_id]/page.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { getMusicList } from "../music";
2+
import { notFound } from "next/navigation";
3+
import { Player } from "./player";
4+
5+
export function generateStaticParams() {
6+
const musicList = getMusicList();
7+
return musicList.map((music) => ({
8+
music_id: music.id,
9+
}));
10+
}
11+
12+
export default async function MusicPage({
13+
params,
14+
}: {
15+
params: Promise<{ music_id: string }>;
16+
}) {
17+
const resolvedParams = await params;
18+
const musicList = getMusicList();
19+
const music = musicList.find((m) => m.id === resolvedParams.music_id);
20+
21+
if (!music) {
22+
notFound();
23+
}
24+
25+
return <Player music={music} musicList={musicList} />;
26+
}

0 commit comments

Comments
 (0)