-
Notifications
You must be signed in to change notification settings - Fork 4
/
MusicPlayer.html
111 lines (111 loc) · 3.35 KB
/
MusicPlayer.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
111
<html>
<head>
<title>My First Music Player</title>
<link rel="shortcut icon" href="http://www.bilibili.com/favicon.ico">
<base target="_blank" />
</head>
<body>
<div>
<ul class="List">
<li>Set Your Url</li>
<li><input value="Set Your Url" id="SetUrl" onkeydown="JavaScript:if (event.keyCode==13) {setTimeout(function(){MusicSetSrc(document.getElementById('SetUrl').value)},1);}"></li>
<li><button onclick="MusicSetSrc(document.getElementById('SetUrl').value)">Update</button></li>
</ul>
<br>
<ul class="List">
<li><button onclick="MusicPlay()">Play/Pause</button></li>
<li><button onclick="MusicStop()">Stop</button></li>
<li><button onclick="Update__()">Show / hide controls</button></li>
</ul>
</div>
<br>
<div>
<ul>
<li>Music Url:<span id="getUrl">undefined</span></li>
<li>Music Long:<span id="getLong">undefined</span></li>
<li>Music Played Time:<span id="getPlayedTime">undefined</span></li>
<li>Music Played Time:<span id="getTime">undefined</span></li>
<li>Music Is Playing:<span id="getIsPlaying">undefined</span></li>
<li>Made By GYHHY</li>
<li><a href="http://space.bilibili.com/97381187/">My BiliBili account.</a></li>
</ul>
</div>
<audio style="width : 100%"></audio>
<script>
var musicPlayer = document.getElementsByTagName('audio')[0];
var isSee = true;
musicPlayer.controls = true;
musicPlayer.paused = true;
function MusicPlay(){
if (musicPlayer.paused) {
musicPlayer.play();
} else {
musicPlayer.pause();
}
}
function MusicStop() {
musicPlayer.pause();
musicPlayer.currentTime = 0;
}
function MusicSetSrc(Url) {
if (Url) {
if (musicPlayer.src != Url) {
musicPlayer.src = Url;
}
return true;
}
return false;
}
function Update__() {
var TempFun = function(i_,Time) {
setTimeout(function() {
musicPlayer.style=("width : "+i_+"%")
}, Time);
}
if (!isSee) {
musicPlayer.controls = true;
for (var i=0;i<=100;i++){
TempFun(i,i*10);
}
} else {
for (var i=100;i>=0;i--) {
TempFun(i,(100-i)*10);
}
setTimeout(function () {
musicPlayer.controls = false;
}, 1000);
}
isSee = (!isSee);
}
var Update_ = function(){
document.getElementById('getUrl').innerHTML = musicPlayer.src;
document.getElementById('getLong').innerHTML = Math.round(musicPlayer.duration*10)/10;
document.getElementById('getPlayedTime').innerHTML = Math.round(musicPlayer.currentTime*10)/10;
var PlayedTime = 0;
try {
PlayedTime = Math.round(Math.round((musicPlayer.currentTime/musicPlayer.duration)*1000))/10;
} catch (e) {
} finally {
if (isNaN(PlayedTime)){
PlayedTime = 0;
}
document.getElementById('getTime').innerHTML = String(PlayedTime)+"%";
}
document.getElementById('getIsPlaying').innerHTML = (!musicPlayer.paused)
}
setInterval(Update_, 100);
</script>
<style>
li {
list-style : none;
}
ul.List li {
float: left;
}
a {
color: #1500ff;
text-decoration : none;
}
</style>
</body>
</html>