-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
110 lines (98 loc) · 5.19 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
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0" />
<title>Music Box</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<style>
* {
padding: 0px;
margin: 0px;
user-select: none;
}
body {
overflow: hidden;
}
#fork_me {
position: fixed;
top: 0px;
right: 0px;
z-index: 9999;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div id="view_port">
<!-- <img src="res/skycity.jpg" /> -->
</div>
<div id="fork_me">
<a href="https://github.com/C0618C/jGE-MusicBox">
<img src="//vmwed.com/jGE/Test/forkme-on-github-right.png" title="trun to github" />
</a>
</div>
<div class="position-fixed fixed-bottom overflow-hidden p-3 p-md-5text-center bg-dark">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="ion-ios-musical-notes"></span> 预设曲谱
</button>
<!-- :["skycity","happybirthday","grandfathersclock","always_with_you","kanong","MARIAGE_D'AMOUR","Merry_Christmas","liangzu","little_star"] -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#skycity"><span class="ion-ios-musical-note"></span>天空之城</a>
<a class="dropdown-item" href="#grandfathersclock">老爷爷的钟</a>
<a class="dropdown-item" href="#happybirthday">生日快乐</a>
<a class="dropdown-item" href="#always_with_you">always with me</a>
<a class="dropdown-item" href="#kanong">卡农</a>
<a class="dropdown-item" href="#MARIAGE_D'AMOUR">梦中的婚礼</a>
<a class="dropdown-item" href="#Merry_Christmas">圣诞快乐</a>
<a class="dropdown-item" href="#liangzu">梁祝</a>
<a class="dropdown-item" href="#little_star">小星星</a>
</div>
</div>
<button type="button" class="btn btn-success ml-5" id="pp_bt"><span class="ion-play" title="play" aria-hidden="true" id="pp_ion"></span></button>
<button type="button" class="btn btn-secondary"><span class="ion-stop" title="stop" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary" id="loop_bt"><span class="ion-loop" title="loop" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="ion-android-volume-off" title="volume" aria-hidden="true"></span></button>
<a class="btn btn-primary ml-5" href="#"><span class="ion-ios-compose-outline" title="New Note" aria-hidden="true"></span></a>
<button type="button" class="btn btn-secondary" id="dir_bt"><span class="ion-android-phone-portrait" title="Direction" aria-hidden="true" id="dir_ion"></span></button>
</div>
<script src="//vmwed.com/jGE/jGE.min.js"></script>
<!-- <script src="http://127.0.0.1:2262/release/jGE.js"-></script> -->
<script src="lib/jGE.Debug.js"></script>
<script src="layout_ctrl.js?=1.2"></script>
<script src="music.js?=1.2"></script>
<script src="core.js?=1.2"></script>
<script src="tape.js?=1.2"></script>
<script src="dial.js?=1.2"></script>
<script src="actionbinder.js?=1.2"></script>
<script src="musicbox.js?=1.2"></script>
<script src="UI.js?=1.2"></script>
<script>
(function () {
const mb = new MusicBox("view_port");
window.mb = mb;
let statu = false;
document.body.addEventListener("dblclick", () => {
if (statu) mb.Stop()
else mb.Play()
statu = !statu;
});
window.addEventListener("hashchange", (...x) => {
mb.SetMusic(location.hash.replace("#", ""))
});
mb.on("MusicBox.Init", () => {
let m = location.hash.replace("#", "") || "skycity";
location.hash = "";
location.hash = m;
let ui = new UI();
ui.Init(mb);
});
//setTimeout(mb.Play.bind(mb),5000);
})();
</script>
</body>
</html>