-
Notifications
You must be signed in to change notification settings - Fork 13
/
demo2.php
112 lines (94 loc) · 4.62 KB
/
demo2.php
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
112
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JustWave Player / Demo 2</title>
<link rel="shortcut icon" href="posters/favicon64.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/justwave.player.js"></script>
<link type="text/css" rel="stylesheet" href="css/justwave.player.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<script src="js/demo2.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">JustWave</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="player.html">JustWave Player</a></li>
<li><a href="demo1.php">Demo 1</a></li>
<li class="active"><a href="#">Demo 2</a></li>
<li><a href="test.php">Test</a></li>
<li><a href="license.html">License</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="http://beotiger.com">beotiger.com</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h1>JustWave Player: Demo 2</h1>
<h2>Choose a song</h2>
<div id="songs-list">
<ol class="songs list-group">
<?php
foreach (glob('media/*.mp3') as $file)
echo "\t\t<li class=\"list-group-item\" data-src=\"$file\">" . basename($file) . "</li>\n";
foreach (glob('media/*.ogg') as $file)
echo "\t\t<li class=\"list-group-item\" data-src=\"$file\">" . basename($file) . "</li>\n";
?>
<li class="list-group-item" data-src="http://everwebcodebox.com/audio-player-master/audio/CosmicTraveler.mp3">http://everwebcodebox.com/audio-player-master/audio/CosmicTraveler.mp3</li>
<li class="list-group-item" data-src="http://justwave.beotiger.com/media/Sweden%20Village.mp3">http://justwave.beotiger.com/media/Sweden%20Village.mp3</li>
</ol>
<div>
<audio width="550" height="345" poster="posters/justwave1.jpg" autoplay></audio>
</div>
</div>
<div class="clear alert alert-warning" class="alert alert-warning" role="alert">
Using <strong>Holly Peers</strong> model star, <strong>Valeria Pooh</strong>, <strong>Victoria</strong> and <strong>Maria</strong> photos which are in a public domain.<br>
Thank you very much from my heart.
</div>
<h2 class="clear">How to create a simple player with playlist in less than 25 lines of code?</h2>
<h3>Tip: we need jQuery and JustWave player. That's all!<br>
<span class="label label-info">Show me the answer</span>
<code>
$(document).ready( function() {<br>
$.justwave();<br>
// main routine for loading songs<br>
$('.songs li[data-src]').click(function() {<br>
$('audio')[0].src = $(this).attr('data-src'); // name of an audio<br>
$(this).addClass('active').siblings().removeClass('active');<br>
});<br>
// start first song<br>
$('.songs li[data-src]').first().click();<br>
// loop list<br>
$('audio').first().on('ended', nextSong).on('error', nextSong);<br>
});<br><br>
function nextSong()<br>
{<br>
var next = $('.songs li[data-src].active').next();<br>
if (!next.length) next = $('.songs li[data-src]').first();<br>
next.addClass('active').siblings().removeClass('active');<br>
$('audio')[0].src = next.attr('data-src');<br>
}
</code>
</h3>
<div class="well">
(c) beotiger Andrey Tzar 2015 AD http://justwave.beotiger.com https://github.com/beotiger email: [email protected]
</div>
</div>
</body>
</html>