janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-26 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add new background animation

Browse Source
This commit is contained in:
Janis Hutz
2023-11-04 15:37:09 +01:00
parent 5266a6e996
commit 22966cb7d5
6 changed files with 182 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/client/showcase.html
View File

@@ -16,13 +16,20 @@
<div v-if="hasLoaded" style="width: 100%">
<div class="current-song-wrapper">
<span class="material-symbols-outlined fancy-view-song-art" v-if="!playingSong.hasCoverArt">music_note</span>
<img v-else :src="'/getSongCover?filename=' + playingSong.filename" class="fancy-view-song-art">
<img v-else :src="'/getSongCover?filename=' + playingSong.filename" class="fancy-view-song-art" id="current-image">
<div class="current-song">
<progress max="1000" id="progress" :value="progressBar"></progress>
<h1>{{ playingSong.title }}</h1>
<p>{{ playingSong.artist }}</p>
</div>
</div>
<div class="mode-selector-wrapper">
<select v-model="visualizationSettings" @change="setVisualization()">
<option value="mic">Microphone (Mic access required)</option>
<option value="bpm">BPM (might not be 100% accurate)</option>
<option value="off">No visualization except background</option>
</select>
</div>
<div class="song-list-wrapper">
<div v-for="song in songQueue" class="song-list">
<span class="material-symbols-outlined song-image" v-if="!song.hasCoverArt && ( playingSong.filename !== song.filename || isPlaying )">music_note</span>
@@ -51,12 +58,14 @@
</div>
<div class="background" id="background">
<div class="beat"></div>
<div class="beat-manual"></div>
</div>
<canvas id="canvas"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/colorPaletteExtractor.js"></script>
<!-- <script src="/colorPaletteExtractor.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script src="/showcase.js"></script>
</body>
</html>