Skip to content

Commit

Permalink
feat: music cover
Browse files Browse the repository at this point in the history
  • Loading branch information
@Piyush-linux
Piyush-linux committed Aug 11, 2024
1 parent ffca4c0 commit 07b5ae6
Show file tree
Hide file tree
Showing 8 changed files with 117 additions and 49 deletions.
Binary file added assets/music/MU.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/music/MU.mp3
View file
Binary file not shown.
0 public/music.jpg → assets/music/SEW.jpg
View file
File renamed without changes
Binary file added assets/music/SEW.mp3
View file
Binary file not shown.
Binary file added assets/music/SWM.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/music/SWM.mp3
View file
Binary file not shown.
158 changes: 111 additions & 47 deletions components/Music.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,88 @@

<script setup>
let progress = ref(null)
let song = ref(null)
let ctrlIcon = ref(null)
let songState = ref(false)
let progress = ref(null)
let song = ref(null)
let ctrlIcon = ref(null)
let songState = ref(false)
// const counter = useState ('counter', () => Math.round(Math.random() * 1000))
onMounted(()=>{
// console.log(song.value)
song.value.onloadedmetadata = function() {
progress.value.max = song.value.duration;
progress.value.value = song.value.currentTime
}
if(songState.value){
song.value.play()
setInterval(()=>{
progress.value.value = song.value.currentTime ;
},500);
}
progress.value.onChange = function(){
song.value.play();
song.value.currentTime = progress.value.value ;
songState = !songState ;
}
onMounted(() => {
// console.log(song.value)
song.value.onloadedmetadata = function () {
progress.value.max = song.value.duration;
progress.value.value = song.value.currentTime
}
if (songState.value) {
song.value.play()
setInterval(() => {
progress.value.value = song.value.currentTime;
}, 500);
}
progress.value.onChange = function () {
song.value.play();
song.value.currentTime = progress.value.value;
songState = !songState;
}
})
})
let play = ()=>{
if(songState.value){
song.value.pause()
}else{
song.value.play()
}
songState.value = !songState.value ;
let play = () => {
if (songState.value) {
song.value.pause()
} else {
song.value.play()
}
songState.value = !songState.value;
}
let songInfo = ref({
id: 1,
name: "WFM",
author: "Zensky",
cover: "music/MU.jpg",
music: "/music/MU.mp3",
})
let songList = [{
id: 1,
name: "WFM",
author: "Zensky",
cover: "music/MU.jpg",
music: "/music/MU.mp3",
}, {
id: 2,
name: "WFM",
author: "Zensky",
cover: "music/MU.jpg",
music: "/music/MU.mp3",
}, {
id: 3,
name: "WFM",
author: "Zensky",
cover: "music/MU.jpg",
music: "/music/MU.mp3",
}]
let PlayNext = () => {
switch (songInfo.value.id) {
case 1:
songInfo.value.id = 2;
break;
case 2:
songInfo.value.id = 3;
break;
case 3:
songInfo.value.id = 1;
break;
default:
break;
}
console.log(songInfo.value.id)
}
</script>
Expand All @@ -46,43 +93,60 @@
<div class="flex justify-center items-center h-fit">
<div class="bg-gray-900 p-8 rounded-lg shadow-md w-80">
<!-- Album Cover -->
<img src="/music.jpg" alt="idk - Highvyn, Taylor Shin" class="w-full h-[15vh] mx-auto rounded-lg object-cover mb-4 border-2 border-gray-500">
<img v-if="songInfo.id == 1" src="@/assets/music/MU.jpg" alt="idk - Highvyn, Taylor Shin"
class="w-full h-[15vh] mx-auto rounded-lg object-cover mb-4 border-2 border-gray-500">
<img v-if="songInfo.id == 2" src="@/assets/music/SEW.jpg" alt="idk - Highvyn, Taylor Shin"
class="w-full h-[15vh] mx-auto rounded-lg object-cover mb-4 border-2 border-gray-500">
<img v-if="songInfo.id == 3" src="@/assets/music/SWM.jpg" alt="idk - Highvyn, Taylor Shin"
class="w-full h-[15vh] mx-auto rounded-lg object-cover mb-4 border-2 border-gray-500">
<!-- Song Title -->
<h2 class="text-xl font-semibold text-center text-[#FFE6E6]">wfm</h2>
<h2 class="text-xl font-semibold text-center text-[#FFE6E6]">{{ songInfo.name }}</h2>
<!-- Artist Name -->
<p class="text-sm text-center text-[#7469B6]">RealestK</p>
<p class="text-sm text-center text-[#7469B6]"> {{ songInfo.author }} </p>
<!-- Music Controls -->
<div class="mt-6 flex justify-center items-center">
<!-- prev -->
<button class="p-3 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
<Icon name="material-symbols:skip-previous" color="#151515" class="text-2xl text-gray-600" />
</button>
<!-- play/pause -->
<button @click="play()" class="p-4 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none mx-4">
<Icon v-show="songState" name="material-symbols:pause-circle-outline" color="#151515" class="text-4xl text-gray-600" ref="ctrlIcon" id="ctrlIcon" />
<Icon v-show="!songState" name="material-symbols:play-circle" color="#151515" class="text-4xl text-gray-600" ref="ctrlIcon" id="ctrlIcon" />
<button @click="play()"
class="p-4 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none mx-4">
<Icon v-show="songState" name="material-symbols:pause-circle-outline" color="#151515"
class="text-4xl text-gray-600" ref="ctrlIcon" id="ctrlIcon" />
<Icon v-show="!songState" name="material-symbols:play-circle" color="#151515"
class="text-4xl text-gray-600" ref="ctrlIcon" id="ctrlIcon" />
</button>
<!-- next -->
<button class="p-3 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
<Icon name="material-symbols:skip-next-rounded" color="#151515" class="text-2xl text-gray-600" />
<button @click="PlayNext()" class="p-3 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
<Icon name="material-symbols:skip-next-rounded" color="#151515"
class="text-2xl text-gray-600" />
</button>
</div>
<!-- Progress Bar -->
<!-- <div class="mt-6 bg-gray-200 h-2 rounded-full"> -->
<!-- <div class="bg-teal-500 h-2 rounded-full w-1/2"></div> -->
<div class="flex justify-center">
<input type="range" value="0" id="progress" ref="progress" class=" mt-6">
</div>
<!-- <div class="bg-teal-500 h-2 rounded-full w-1/2"></div> -->
<div class="flex justify-center">
<input type="range" value="0" id="progress" ref="progress" class=" mt-6">
</div>
<!-- </div> -->
<div class="flex justify-between mt-2 text-sm text-gray-600">
<span>1:57</span>
<span>3:53</span>
</div>
<!-- /// -->
<audio controls id="song" ref="song" class="hidden">
<source src="/wfm.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio v-if="songInfo.id == 1" controls id="song" ref="song" class="hidden">
<source src="@/assets/music/MU.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio v-if="songInfo.id == 2" controls id="song" ref="song" class="hidden">
<source src="@/assets/music/SEW.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio v-if="songInfo.id == 3" controls id="song" ref="song" class="hidden">
<source src="@/assets/music/SWM.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
Expand Down
8 changes: 6 additions & 2 deletions components/Notepad.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<script setup>
let txt = "Made with Love by Piyush \n\n## Tech Stack \n- Nuxt JS \n- Tailwind CSS \n- Shepherd.js \n\nHope You are having a great day :)"
</script>

<template>
<div class="h-full w-full bg-gray-900 p-5 rounded-xl opacity-[.8]">
<textarea name="" id="" class="w-full h-full bg-gray-900 text-pink-200 f1 outline-none p-3 border-l-2 border-pink-400" value="Made with Love by Piyush &#13;&#10;&#13;&#10;## Tech Stack &#13;&#10;- Nuxt JS&#13;&#10;- Tailwind CSS &#13;&#10;- Shepherd.js &#13;&#10;&#13;&#10;Hope You are having a great day :)">

<textarea name="" id="" class="w-full h-full bg-gray-900 text-pink-200 f1 outline-none p-3 border-l-2 border-pink-400" :value="txt">
<!-- {{ txt }} -->
</textarea>
</div>
</template>

0 comments on commit 07b5ae6

Please sign in to comment.