versustunez/audio-vis
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

WIP

Browse source
This commit is contained in:
Maurice Grönwoldt 2020-08-01 21:51:54 +02:00
commit 300b6c4106
30 changed files with 1399 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

35
index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEBGL Test</title>
<title>VS3D-Vis</title>
<link rel="stylesheet" href="out/theme/style.css">
</head>
<body>
@ -19,11 +19,19 @@
</div>
<div class="upload menu-icon">
<label for="upload">
<svg role="img" class="icon">
<use href="out/icon-sprite.svg#fal-fa-file-audio"></use>
</svg>
</label>
<input type="file" multiple accept="audio/*" id="upload">
</div>
<div class="upload menu-icon">
<label for="upload-dir">
<svg role="img" class="icon">
<use href="out/icon-sprite.svg#fal-fa-folder-upload"></use>
</svg>
</label>
<input type="file" accept="audio/*" id="upload">
<input type="file" multiple directory webkitdirectory accept="audio/*" id="upload-dir">
</div>
<div class="playlist menu-icon">
<svg role="img" class="icon">
@ -38,10 +46,10 @@
</svg>
</button>
<button id="play">
<svg role="img" class="icon hide">
<svg role="img" data-name="pause" class="pause icon hide">
<use href="out/icon-sprite.svg#fal-fa-pause"></use>
</svg>
<svg role="img" class="icon">
<svg role="img" data-name="play" class="icon">
<use href="out/icon-sprite.svg#fal-fa-play"></use>
</svg>
</button>
@ -52,6 +60,25 @@
</button>
</div>
<canvas id="c"></canvas>
<div class="grey-screen hide">
<div id="modal">
<header>
<span class="headline">Playlist</span>
<span class="close">X</span>
</header>
<modal-content>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</modal-content>
<modal-footer>
</modal-footer>
</div>
</div>
<script src="out/js/scripts.min.js"></script>
</body>
</html>