-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
39 lines (38 loc) · 5.08 KB
/
Copy pathindex.html
File metadata and controls
39 lines (38 loc) · 5.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--
Copyright luojia@luojia.me
-->
<meta charset="utf-8">
<meta keywords='coding,audio,visulization'>
<title>Web Audio Api demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
<canvas id="canvas"></canvas>
<div id="ctrls">
<div id="sourceinput" style="opacity:1;"><div id="msg" style="font-size: 29px;">点我或拖进音乐！</div><input type="file" multiple /></div>
<!-- 播放列表 -->
<div id="playlist" style="opacity:1;">
<div id="controls">
<div id="pre" style="left: 0px;"><svg width="40.0px" height="40.0px"><polyline fill="#fff" points="30.11111,5.2222223 11.732024,20.99673 30.555555,34.96732 30.408497,4.9673195" stroke-linejoin="round" stroke-linecap="round" stroke="#fff"/><line stroke-linecap="round" fill="none" x1="10.555555" x2="10.555555" y1="5.261437" y2="35.555557" stroke="#fff"stroke-width="3"/></svg></div>
<div id="play" style="left: 40px;"><svg width="40.0px" height="40.0px"><polyline fill="#fff" transform="matrix(-1.0 0.0 -0.0 -1.0 42.28758 39.93464)" points="30.444445,5.111111 12.065357,20.88562 30.88889,34.85621 30.74183,4.8562083" stroke-linejoin="round" stroke-linecap="round" stroke="#fff"/></svg></div>
<div id="pause" style="left: 80px;"><svg width="40.0px" height="40.0px"><line stroke-linecap="round" transform="matrix(-1.0 0.0 -0.0 -1.0 41.11111 40.522877)" fill="none" x1="14.111108"
x2="14.111115" y1="7.8169928" y2="32.300655" stroke="#fff" stroke-width="8"/><line stroke-linecap="round" transform="matrix(-1.0 0.0 0.0 -1.0 41.11111 40.522877)" fill="none" x1="27.999985" x2="27.999992" y1="7.8169928" y2="32.300655" stroke="#fff" stroke-width="8"/></svg></div>
<div id="next" style="left: 120px;"><svg width="40.0px" height="40.0px"><polyline fill="#fff" transform="matrix(-1.0 0.0 -0.0 -1.0 41.11111 40.522877)" points="30.11111,5.2222223 11.732024,20.99673 30.555555,34.96732 30.408497,4.9673195" stroke-linejoin="round" stroke-linecap="round" stroke="#fff"/><line stroke-linecap="round" transform="matrix(-1.0 0.0 -0.0 -1.0 41.11111 40.522877)" fill="none" x1="10.555555"x2="10.555555" y1="5.261437" y2="35.555557" stroke="#fff" stroke-width="3"/></svg></div>
<div id="playmode" style="left: 160px;"><svg width="40.0px" height="40.0px"></svg></div>
<div id="songlist" style="left: 200px;"><svg width="40.0px" height="40.0px"><line stroke-linecap="round" fill="none" x1="7.4444447" x2="32.333332" y1="11.111111" y2="11.111111" stroke="#fff" stroke-width="6"/><line stroke-linecap="round" fill="none" x1="7.3333335" x2="32.22222" y1="20.222225" y2="20.222225" stroke="#fff" stroke-width="6"/><line stroke-linecap="round" fill="none" x1="7.4444447" x2="32.333332" y1="29.555557" y2="29.555557" stroke="#fff" stroke-width="6"/></svg></div>
<div id="online"><span>Online</span><br><span id="onlinenumber">...</span></div>
<div id="coding" style="left: 290px; width: 53px;"><a target="_blank" href="https://coding.net/u/luojia/p/Audio-Visualizations/git"><svg width="50px" height="40px" viewBox="0 0 407.5 306.577" enable-background="new 0 0 407.5 306.577" ><g><ellipse fill="#fff" cx="159.785" cy="167.517" rx="3.656" ry="4.39"/><ellipse fill="#fff" cx="246.618" cy="167.517" rx="3.656" ry="4.39"/><path fill="#fff" d="M299.252,139.319c-5.997,0-11.253,3.803-14.191,9.509c-9.997-21.679-30.795-41.764-56.498-50.035 c-13.869-5.534-23.608-16.155-24.812-28.568c-1.204,12.413-10.943,23.034-24.812,28.568c-25.703,8.271-46.501,28.355-56.498,50.035 c-2.938-5.706-8.194-9.509-14.191-9.509c-9.21,0-16.676,8.965-16.676,20.025c0,11.059,7.466,20.025,16.676,20.025 c2.801,0,5.439-0.833,7.757-2.299c0.793,35.91,39.753,59.219,87.745,59.282c47.991-0.062,86.952-23.372,87.745-59.282 c2.318,1.466,4.956,2.299,7.757,2.299c9.21,0,16.676-8.965,16.676-20.025C315.928,148.285,308.461,139.319,299.252,139.319z M115.83,165.602c-0.78,2.883-4.253,4.111-7.757,2.744c-3.504-1.367-5.712-4.812-4.932-7.695c0.78-2.883,4.253-4.111,7.757-2.744 S116.61,162.72,115.83,165.602z M203.75,226.356c-38.492-0.06-69.664-18.201-69.664-44.17c0-0.544,0.02-1.083,0.046-1.621 c0.009-0.177,0.018-0.354,0.03-0.531c0.024-0.367,0.057-0.732,0.093-1.097c0.049-0.489,0.107-0.976,0.178-1.46 c0.007-0.048,0.013-0.096,0.02-0.144c0.775-5.104,2.759-12.893,5.755-17.382c7.198-10.412,20.037-17.348,34.684-17.348 c11.276,0,21.473,4.118,28.858,10.759c7.385-6.641,17.582-10.759,28.858-10.759c14.647,0,27.486,6.937,34.684,17.348 c2.996,4.489,4.98,12.278,5.755,17.382c0.007,0.048,0.013,0.096,0.02,0.144c0.072,0.484,0.129,0.972,0.178,1.46 c0.036,0.365,0.069,0.729,0.093,1.097c0.012,0.177,0.021,0.354,0.03,0.531c0.026,0.538,0.046,1.077,0.046,1.621 C273.414,208.155,242.242,226.295,203.75,226.356z M299.427,168.346c-3.504,1.367-6.977,0.139-7.757-2.744s1.428-6.328,4.932-7.695 c3.504-1.367,6.977-0.139,7.757,2.744C305.139,163.534,302.931,166.979,299.427,168.346z"/></g></svg></a></div>
</div>
<div id="list">
<div></div><br>
<div></div><br>
<div></div><br>
<div></div><br>
<div></div>
</div>
</div>
</div>
</div>
<script src="CanvasObjLibrary.js"></script>
<script src="GraphLib.js"></script>
<script src="visualization.js"></script>
<script src=" https://jiajiajiang.github.io/online/client/online.babel.js"></script>
<script src="main.js"></script>