-
Notifications
You must be signed in to change notification settings - Fork 37
/
player_invisible.html
76 lines (73 loc) · 3.95 KB
/
player_invisible.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
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn-files.deezer.com/js/min/dz.js"></script>
<style type="text/css">
.progressbarplay {
cursor:pointer;overflow: hidden;height: 8px;margin-bottom: 8px;background-color: #F7F7F7;background-image: -moz-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: -ms-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: -webkit-gradient(linear,0 0,0 100%,from(whiteSmoke),to(#F9F9F9));background-image: -webkit-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: -o-linear-gradient(top,whiteSmoke,#F9F9F9);background-image: linear-gradient(top,whiteSmoke,#F9F9F9);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#f9f9f9',GradientType=0);-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
}
.progressbarplay .bar {
cursor:pointer;background: #4496C6;width: 0;height: 8px;color: white;font-size: 12px;text-align: center;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: width .6s ease;-moz-transition: width .6s ease;-ms-transition: width .6s ease;-o-transition: width .6s ease;transition: width .6s ease;
}
</style>
</head>
<body>
<div id="dz-root"></div>
<div id="controlers">
<input type="button" onclick="DZ.player.playAlbum(302127); return false;" value="Play Daft Punk - Discovery"/>
<input type="button" onclick="DZ.player.playAlbum(301775); return false;" value="Play Daft Punk - Homework"/>
<br/>
<input type="button" onclick="DZ.player.play(); return false;" value="play"/>
<input type="button" onclick="DZ.player.pause(); return false;" value="pause"/>
<input type="button" onclick="DZ.player.prev(); return false;" value="prev"/>
<input type="button" onclick="DZ.player.next(); return false;" value="next"/>
<br/>
<input type="button" onclick="DZ.player.setVolume(20); return false;" value="set Volume 20"/>
<input type="button" onclick="DZ.player.setVolume(80); return false;" value="set Volume 80"/>
<br/><br/><br/>
</div>
<div id="slider_seek" class="progressbarplay" style="">
<div class="bar" style="width: 0%;"></div>
</div>
<script>
$(document).ready(function(){
$("#controlers input").attr('disabled', true);
$("#slider_seek").click(function(evt,arg){
var left = evt.offsetX;
console.log(evt.offsetX, $(this).width(), evt.offsetX/$(this).width());
DZ.player.seek((evt.offsetX/$(this).width()) * 100);
});
});
function event_listener_append() {
var pre = document.getElementById('event_listener');
var line = [];
for (var i = 0; i < arguments.length; i++) {
line.push(arguments[i]);
}
pre.innerHTML += line.join(' ') + "\n";
}
function onPlayerLoaded() {
$("#controlers input").attr('disabled', false);
event_listener_append('player_loaded');
DZ.Event.subscribe('current_track', function(arg){
event_listener_append('current_track', arg.index, arg.track.title, arg.track.album.title);
});
DZ.Event.subscribe('player_position', function(arg){
event_listener_append('position', arg[0], arg[1]);
$("#slider_seek").find('.bar').css('width', (100*arg[0]/arg[1]) + '%');
});
}
DZ.init({
appId : '8',
channelUrl : 'http://developers.deezer.com/examples/channel.php',
player : {
onload : onPlayerLoaded
}
});
</script><br/>
event_listener : <br/>
<pre id="event_listener" style="height:100px;overflow:auto;"></pre>
</body>
</html>