Jukebox in PHP
Ik ben jeffrey en doe de opleiding mediadeveloper.
We hebben voor school een opdracht gekregen om een jukebox te maken in PHP voor de opendag.
We hebben een HTML5 player in het midden en die leest met behulp van PHP de database uit en print het in de player,
Nu hebben we een probleem, we zouden graag als het kan een functie of een aanpassing van een script willen invoegen, zodat als de persoon zoekt naar een nummer, het nummer blijft spelen, en niet dat hij ineens stopt. ik ben zelf al een beetje wezen zoeken op het internet maar mijn vraag kon ik nergens vinden.
de jukebox is zo goed als klaar maar met die functie zou hij alleen maar beter worden.
(ps als jullie een stukje code nodig hebben dan post ik die wel, ik ben nu niet op de computer waar het script op staat)
Alvast bedankt,
Jeffrey
Gesponsorde koppelingen:
Code (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
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
<?php
// Inialize session
session_start();
// Check, if username session is NOT set then this page will jump to login page
if (!isset($_SESSION['username'])) {
header('Location:login.php');
}
?>
<DOCTYPE! html>
<html>
<head>
<title> Jukebox </title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<link rel="stylesheet" type="text/css" href="CSS/audioplayer.css" />
<script type="text/javascript" src="CSS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jq/jquery-1.7.1.min.js"></script>
<script src="CSS/scripts.js"></script>
</head>
<body>
<div id="container">
<div id="toevoegen">
<a href="nummer_toevoegen.php">Toevoegen</a>
</div>
<div id="logout">
<a href="logout.php">Uitloggen</a>
</div>
<div id="neon">
<strong> Jukebox </strong>
</div>
<center>
<form id="zoeken" method="POST" action="jukebox.php">
<input type="text" name="zoeken" />
<input id="zoeken" type="submit" value="Zoeken" />
</form>
</center>
<!-- Jukebox -->
<div id="wrapper">
<div id="square">
<audio id="audio" controls="controls" autoplay="autoplay" preload="none"></audio>
<div id="playlist">
<?php
include('connect.jukebox.php');
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$query = " SELECT ID, Artist, Title, Filename FROM muziek WHERE
Artist LIKE '%".mysql_real_escape_string($_POST['zoeken'])."%'
OR Title LIKE '%".mysql_real_escape_string($_POST['zoeken'])."%'
OR Genre LIKE '%".mysql_real_escape_string($_POST['zoeken'])."%'
ORDER by Artist";
if($result = mysql_query($query))
{
while($row = mysql_fetch_assoc($result))
{
$id=$row['ID'];
$filename=$row['Filename'];
$filepath= "Audio/".$filename;
$artist=$row['Artist'];
$title=$row['Title'];
echo "<a id=\"$id\" href=\"$filepath\">$artist - $title</a>";
}
}
else
{
echo "Geen resultaten gevonden.";
}
}
?>
</div>
<div id="foot">
<a id="toggle" href="#">Close Playlist</a>
<br>
</div>
</div>
</div>
<!-- Einde jukebox -->
</div>
<footer>
© Thijs van der Plas, Jeffrey Leesmans en Virgil de Meijer
</footer>
</body>
</html>
// Inialize session
session_start();
// Check, if username session is NOT set then this page will jump to login page
if (!isset($_SESSION['username'])) {
header('Location:login.php');
}
?>
<DOCTYPE! html>
<html>
<head>
<title> Jukebox </title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<link rel="stylesheet" type="text/css" href="CSS/audioplayer.css" />
<script type="text/javascript" src="CSS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jq/jquery-1.7.1.min.js"></script>
<script src="CSS/scripts.js"></script>
</head>
<body>
<div id="container">
<div id="toevoegen">
<a href="nummer_toevoegen.php">Toevoegen</a>
</div>
<div id="logout">
<a href="logout.php">Uitloggen</a>
</div>
<div id="neon">
<strong> Jukebox </strong>
</div>
<center>
<form id="zoeken" method="POST" action="jukebox.php">
<input type="text" name="zoeken" />
<input id="zoeken" type="submit" value="Zoeken" />
</form>
</center>
<!-- Jukebox -->
<div id="wrapper">
<div id="square">
<audio id="audio" controls="controls" autoplay="autoplay" preload="none"></audio>
<div id="playlist">
<?php
include('connect.jukebox.php');
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$query = " SELECT ID, Artist, Title, Filename FROM muziek WHERE
Artist LIKE '%".mysql_real_escape_string($_POST['zoeken'])."%'
OR Title LIKE '%".mysql_real_escape_string($_POST['zoeken'])."%'
OR Genre LIKE '%".mysql_real_escape_string($_POST['zoeken'])."%'
ORDER by Artist";
if($result = mysql_query($query))
{
while($row = mysql_fetch_assoc($result))
{
$id=$row['ID'];
$filename=$row['Filename'];
$filepath= "Audio/".$filename;
$artist=$row['Artist'];
$title=$row['Title'];
echo "<a id=\"$id\" href=\"$filepath\">$artist - $title</a>";
}
}
else
{
echo "Geen resultaten gevonden.";
}
}
?>
</div>
<div id="foot">
<a id="toggle" href="#">Close Playlist</a>
<br>
</div>
</div>
</div>
<!-- Einde jukebox -->
</div>
<footer>
© Thijs van der Plas, Jeffrey Leesmans en Virgil de Meijer
</footer>
</body>
</html>
Gewijzigd op 19/01/2012 12:40:03 door jeffrey leesmans
Joey Drieling op 19/01/2012 13:00:21:
Ajax reqeust
verklaar u nader?
Kijk ook eens naar jQueryUI Autocomplete with AJAX.
Chris Horeweg op 19/01/2012 13:18:18:
Kijk even naar jQuery en jQuery POST! Met AJAX laat je de browser een POST-request doen naar de server en daarmee kun je dus zoeken.
Kijk ook eens naar jQueryUI Autocomplete with AJAX.
Kijk ook eens naar jQueryUI Autocomplete with AJAX.
ok maar kan je dan ook zoeken in het veld waar het nummer afspeelt?
had iets gevonden met "submit form without page refresh" zal dat relevant zijn aan het probleem denkt u?
Jeffrey leesmans op 19/01/2012 13:25:52:
ok maar kan je dan ook zoeken in het veld waar het nummer afspeelt?
Chris Horeweg op 19/01/2012 13:18:18:
Kijk even naar jQuery en jQuery POST! Met AJAX laat je de browser een POST-request doen naar de server en daarmee kun je dus zoeken.
Kijk ook eens naar jQueryUI Autocomplete with AJAX.
Kijk ook eens naar jQueryUI Autocomplete with AJAX.
ok maar kan je dan ook zoeken in het veld waar het nummer afspeelt?
Dat zou moeten kunnen. je bedoelt waar de huidige titel in staan, van het liedje dat draait.
met de empty() functie in jQuery kan je deze eerst verwijderen, als men er op zou klikken, dan kan je de autocomplete() function erop aanroepen.
voor nu laat ik de jukebox maar zo.
in ieder geval bedankt voor de hulp.
Alles werkt simpel en makkelijk, je kunt je er zo in verdiepen.
