Skip to content

Commit f2fbc05

Browse files
dinushchathuryadinushchathurya
committed
feat: finish the music player
1 parent 4cb0c23 commit f2fbc05

File tree

1 file changed

+132
-47
lines changed

1 file changed

+132
-47
lines changed

‎src/App.vue‎

Lines changed: 132 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
1-
<template>
1+
2+
<template>
23
<div id="app">
34
<header>
4-
<h1>My Music Player</h1>
5+
<h1>My Music</h1>
56
</header>
67
<main>
78
<section class="player">
8-
<h2 class="song-title">{{ current.title }} <span>{{ current.artist }}</span></h2>
9-
<div class="control">
10-
<button class="prev" @click="previous">Previous</button>
9+
<h2 class="song-title">{{ current.title }} - <span>{{ current.artist }}</span></h2>
10+
<div class="controls">
11+
<button class="prev" @click="prev">Prev</button>
1112
<button class="play" v-if="!isPlaying" @click="play">Play</button>
1213
<button class="pause" v-else @click="pause">Pause</button>
13-
<button class="next" @click="next">Next</button>
14+
<button class="next" @click="next">Next</button>
1415
</div>
1516
</section>
1617
<section class="playlist">
1718
<h3>The Playlist</h3>
1819
<button v-for="song in songs" :key="song.src" @click="play(song)" :class="(song.src == current.src) ? 'song playing' : 'song'">
19-
{{ song.title }} - {{ song.artist}}
20-
</button>
20+
{{ song.title }} - {{ song.artist }}
21+
</button>
2122
</section>
2223
</main>
2324
</div>
2425
</template>
2526

2627
<script>
27-
2828
export default {
29-
name: 'App',
29+
name: 'app',
3030
data () {
3131
return {
3232
current: {},
3333
index: 0,
34-
isPlaying : false,
34+
isPlaying: false,
3535
songs: [
36-
{
37-
title : 'Suragana Kirilliye',
38-
artist: 'Infaass',
39-
src : require('./assets/Suragana-Kirilliye-(Remix)-Infaas-Nooruddin.mp3')
40-
},
41-
{
42-
title : 'Yannada Igilli',
43-
artist: 'Infaass',
44-
src : require('./assets/iraj_get-gone-luca-dayz-iraj-ft-carlprit.mp3')
45-
},
46-
],
36+
{
37+
title : 'Suragana Kirilliye',
38+
artist: 'Infass',
39+
src : require('./assets/Suragana-Kirilliye-(Remix)-Infaas-Nooruddin.mp3')
40+
},
41+
{
42+
title : 'Get Gone',
43+
artist: 'Iraj',
44+
src : require('./assets/iraj_get-gone-luca-dayz-iraj-ft-carlprit.mp3')
45+
},
46+
],
4747
player: new Audio()
4848
}
4949
},
@@ -54,52 +54,137 @@ export default {
5454
this.player.src = this.current.src;
5555
}
5656
this.player.play();
57+
this.player.addEventListener('ended', function () {
58+
this.index++;
59+
if (this.index > this.songs.length - 1) {
60+
this.index = 0;
61+
}
62+
this.current = this.songs[this.index];
63+
this.play(this.current);
64+
}.bind(this));
5765
this.isPlaying = true;
5866
},
59-
pause (){
67+
pause () {
6068
this.player.pause();
6169
this.isPlaying = false;
6270
},
63-
next(){
71+
next () {
6472
this.index++;
65-
if(this.index > this.songs.lenght - 1){
73+
if (this.index > this.songs.length - 1) {
6674
this.index = 0;
6775
}
6876
this.current = this.songs[this.index];
69-
this.play[this.current];
77+
this.play(this.current);
7078
},
71-
previous(){
79+
prev () {
7280
this.index--;
73-
if(this.index < 0){
74-
this.index = this.songs.lenght - 1;
81+
if (this.index < 0) {
82+
this.index = this.songs.length - 1;
7583
}
7684
this.current = this.songs[this.index];
77-
this.play[this.current];
85+
this.play(this.current);
7886
}
7987
},
80-
created() {
88+
created () {
8189
this.current = this.songs[this.index];
8290
this.player.src = this.current.src;
83-
8491
}
8592
}
8693
</script>
8794

8895
<style>
89-
*{
90-
margin:0;
91-
padding:0;
92-
box-sizing:border-box;
93-
}
94-
body{
95-
font-family: sans-serif;
96-
}
97-
header{
98-
display:flex;
99-
justify-content:center;
100-
align-item:center;
96+
* {
97+
margin: 0;
98+
padding: 0;
99+
box-sizing: border-box;
100+
}
101+
body {
102+
font-family: sans-serif;
103+
background: rgb(238,174,202);
104+
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
105+
}
106+
header {
107+
display: flex;
108+
justify-content: center;
109+
align-items: center;
110+
padding: 15px;
111+
background-color: #212121;
112+
color: #FFF;
113+
}
114+
main {
115+
width: 100%;
116+
max-width: 768px;
117+
margin: 0 auto;
118+
padding: 25px;
119+
}
120+
.song-title {
121+
color: #53565A;
122+
font-size: 32px;
123+
font-weight: 700;
124+
text-transform: uppercase;
125+
text-align: center;
126+
}
127+
.song-title span {
128+
font-weight: 400;
129+
font-style: italic;
130+
}
131+
.controls {
132+
display: flex;
133+
justify-content: center;
134+
align-items: center;
135+
padding: 30px 15px;
136+
}
137+
button {
138+
appearance: none;
139+
background: none;
140+
border: none;
141+
outline: none;
142+
cursor: pointer;
143+
}
144+
button:hover {
145+
opacity: 0.8;
146+
}
147+
.play, .pause {
148+
font-size: 20px;
149+
font-weight: 700;
150+
padding: 15px 25px;
151+
margin: 0px 15px;
152+
border-radius: 8px;
153+
color: #FFF;
154+
background-color: #CC2E5D;
155+
}
156+
.next, .prev {
157+
font-size: 16px;
158+
font-weight: 700;
159+
padding: 10px 20px;
160+
margin: 0px 15px;
161+
border-radius: 6px;
162+
color: #FFF;
163+
background-color: #FF5858;
164+
}
165+
.playlist {
166+
padding: 0px 30px;
167+
}
168+
.playlist h3 {
169+
color: #212121;
170+
font-size: 28px;
171+
font-weight: 400;
172+
margin-bottom: 30px;
173+
text-align: center;
174+
}
175+
.playlist .song {
176+
display: block;
177+
width: 100%;
101178
padding: 15px;
102-
background-color: #212121;
103-
color:#fff;
179+
font-size: 20px;
180+
font-weight: 700;
181+
cursor: pointer;
182+
}
183+
.playlist .song:hover {
184+
color: #FF5858;
185+
}
186+
.playlist .song.playing {
187+
color: #FFF;
188+
background-image: linear-gradient(to right, #CC2E5D, #FF5858);
104189
}
105-
</style>
190+
</style>

0 commit comments

Comments
 (0)