-
Notifications
You must be signed in to change notification settings - Fork 2
/
playlist.html
99 lines (76 loc) · 2.22 KB
/
playlist.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
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="pbjs.min.js"></script>
<script type="text/javascript" src="../dist/pbplayer.js"></script>
<script type="text/javascript">
pbPlayer.config({
path: '/pbPlayer/dist/',
solution: 'html5 flash',
volume: 10,
debug: false
});
// without new does not work on ie9
var player = new pbPlayer({
autoplay: true
});
// Set single file
player.addMedia([
{
mp3: '/bla.mp3',
title: 'Bla.mp3',
},
{
ogg: '/bla.ogg',
title: 'Bla.ogg',
}
]);
player.on('mediachanged', function ( e ) {
PB.$('#media').setText(e.media.title);
});
player.on('timeupdate', function ( e ) {
PB.$('#time').setText(''+e.position);
PB.$('#timeprogress').setStyle({width: e.progress+'%'});
});
player.on('duration', function ( e ) {
PB.$('#duration').setText(''+e.length);
});
player.on('progress', function ( e ) {
PB.$('#progress').setStyle({width: e.loaded+'%'});
});
player.on('error', function ( e ) {
PB.log('error', e.message);
PB.$('#error').setText(e.message);
});
</script>
<div id="error"></div>
<button onclick="player.play()">Play</button>
<button onclick="player.pause()">Pause</button>
<button onclick="player.stop()">Stop</button>
<br />
<button onclick="player.setVolume(100)">Volume 100%</button>
<button onclick="player.setVolume(50)">Volume 50%</button>
<button onclick="player.setVolume(0)">Volume 0%</button>
<br />
<button onclick="player.playAt(10)">playAt 10s</button>
<button onclick="player.playAt(30)">playAt 30s</button>
<button onclick="player.playAt(60)">playAt 60s</button>
<button onclick="player.playAt(200)">playAt 200s</button>
<button onclick="player.playAt(260)">playAt 260s</button>
<br />
<button onclick="player.previous()">Previous song</button>
<button onclick="player.next()">Next song</button>
<br />
<div id="media"></div>
<br />
<div style="width: 200px; height: 8px; position: relative;">
<div id="progress" style="background-color: #CCCC9A; width: 0%; height: 8px; position: absolute; left: 0; top: 0;"></div>
<div id="timeprogress" style="background-color: #999967; width: 0%; height: 8px; position: absolute; left: 0; top: 0;"></div>
</div>
<br />
<span id="time">0</span> / <span id="duration">0</span>
</body>
</html>