-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·102 lines (84 loc) · 3.67 KB
/
index.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="ch">
<head>
<title>我的音乐</title>
<link rel='stylesheet' href= "stylesheets/style.css" />
<meta charset="utf-8" />
<link rel="icon" href="images/yy.png"/>
<link rel="author" content="王猛"/>
<style>
body {
margin: 0;
background: transparent;
}
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url( images/bg.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<header>
<div align="center">
<h1><a target= "_self" href="https://github.com/yutayouguan/Music-visualization" style="text-decoration: none" ><strong>Github</strong></a></h1>
</div>
<h1>Music-visualization</h1>
<ul class="type" id="type">
<li data-type="dot">圆点图</li>
<li data-type="column" class="select">柱状图</li>
<li data-type="line" >折线图</li>
</ul>
<p>音量 <input type="range" id="volume" mix="0" max="100" value="50">
时间 <input type="range" id="alltime" mix="0" value="0"><span id="time"></span>
</p>
</header>
<div class="left">
<!-- <input type="button" id="online" value="在线"> -->
<label for="add" class="for-input">选择本地音频<input type="file" onchange="return run(this.files);" id="add" /></label>
<ul id="list">
<li title="薛之谦-演员.mp3">薛之谦-演员.mp3</li>
<li title="周杰伦-告白气球.mp3">周杰伦-告白气球.mp3</li>
<li title="周杰伦-七里香.mp3">周杰伦-七里香.mp3</li>
<li title="杨丞琳-左边.mp3">杨丞琳-左边.mp3</li>
<li title="BIGBANG - IF YOU.mp3">BIGBANG - IF YOU.mp3</li>
<li title="韩安旭-多幸运.mp3">韩安旭-多幸运.mp3</li>
<li title="卓亚君-Lolita.mp3">卓亚君-Lolita.mp3</li>
<li title="阿摩司、代芙妮 - We Will Never Be Apart.mp3">阿摩司、代芙妮 - We Will Never Be Apart.mp3</li>
<li title="谢容儿 - 年华.mp3">谢容儿 - 年华.mp3</li>
<li title="莫小娘 - 此用户下落不明.mp3">莫小娘 - 此用户下落不明.mp3</li>
<li title="冯曦妤 - Proud Of You.mp3">冯曦妤 - Proud Of You.mp3</li>
<li title="吉克隽逸 - 幸福加油.mp3">吉克隽逸 - 幸福加油.mp3</li>
<li title="Alexandra Stan - Dance.mp3">Alexandra Stan - Dance.mp3</li>
<li title="Alexandra Stan、Connect-R - Vanilla Chocolat - CryDuom Remix版.mp3">Alexandra Stan、Connect-R - Vanilla Chocolat - CryDuom Remix版.mp3</li>
<li title="老狼 - 想把我唱给你听.mp3">老狼 - 想把我唱给你听.mp3</li>
<li title="sara - 即使知道要见面">sara - 即使知道要见面</li>
<li title="久石让 - Summer.mp3">久石让 - Summer.mp3</li>
<ul id="locale-file"></ul>
</ul>
</div>
<div class="right" id="box"></div>
<script type="text/javascript" src="Javascripts/MusicVisualizer.js">
</script>
<script type="text/javascript" src="Javascripts/index.js"></script>
<video autoplay loop poster="images/bg.png" id="bgvideo">
<source src="videos/魔布.webm" type="video/webm">
<source src="videos/魔布.mov" type="video/mp4">
</video>
<script>
var video = document.getElementById("bgvideo");
video.addEventListener('touchstart', function(e) {
e.preventDefault();
video.play();
});
</script>
</body>
</html>