forked from Gargaj/relive.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (76 loc) · 2.99 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
<!DOCTYPE html>
<html>
<head>
<title>relive.js example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- we use prototype here but this could be jquery really -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="./relive.js"></script>
<style type="text/css">
#stations { font-size: 20px; }
footer,pre { font-size: 10px; }
#debug { width: 400px; height: 600px; overflow: scroll; background: #eee; position: fixed; top: 30px; right: 10px; }
li { cursor: pointer; }
li:hover { text-decoration: underline; }
#player { position: fixed; top: 10px; right: 10px; }
</style>
</head>
<body>
<script type="text/javascript">
<!--
document.observe("dom:loaded",function(){
Relive.useSingleton = false;
$("stream").hide();
Relive.loadStations(function(stations){
$("stations").update("");
$H(stations).each(function(item){
var li = new Element("li");
li.update(item.value.name);
li.setAttribute("data-id",item.value.id);
li.observe("click",function(ev){
var stationID = ev.findElement("li").getAttribute("data-id");
Relive.loadStationInfo( stationID, function(station){
$("streams").update("");
$H(station.streams).each(function(item){
var li2 = new Element("li");
li2.update(item.value.name);
li2.setAttribute("data-id",item.value.id);
li2.observe("click",function(ev2){
var streamID = ev2.findElement("li").getAttribute("data-id");
Relive.loadStreamChat( stationID, streamID, function(s){
$("debug").update( JSON.stringify(Relive.useSingleton ? Relive : s,null,2) );
} );
Relive.loadStreamInfo( stationID, streamID, function(s){
$("debug").update( JSON.stringify(Relive.useSingleton ? Relive : s,null,2) );
} );
$("player").update("");
var audio = new Element("audio",{id:"stream","controls":"controls"});
$("player").insert(audio);
var src = new Element("source",{id:"source"});
src.setAttribute("src" ,Relive.getStreamURL( stationID, streamID ));
src.setAttribute("type",Relive.getStreamMimeType( stationID, streamID ));
audio.insert( src );
setTimeout(function(){ audio.play(); },1000);
//$("debug").update( JSON.stringify(Relive,null,2) );
});
$("streams").insert( li2 );
});
});
});
$("stations").insert( li );
});
});
});
//-->
</script>
<pre id="debug"></pre>
<ul id="stations"></ul>
<ul id="streams"></ul>
<div id="player">
<audio id="stream" controls="controls"></audio>
</div>
<footer>
<a href="https://github.com/Gargaj/relive.js">https://github.com/Gargaj/relive.js</a>
</footer>
</body>
</html>