From 4feacbf66a496995dc81d009789aa0933f036221 Mon Sep 17 00:00:00 2001
From: jojoc4 <me@jojoc4.ch>
Date: Thu, 29 Dec 2022 10:41:27 +0100
Subject: [PATCH 1/2] updater and admin space

---
 admin/music.php   | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 config_sample.php |  2 +-
 updater/v1.php    |  4 ++--
 updater/v2.php    | 36 ++++++++++++++++++++++++++++
 updater/v2.sql    |  8 +++++++
 5 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 updater/v2.php
 create mode 100644 updater/v2.sql

diff --git a/admin/music.php b/admin/music.php
index a1cc102..bbf6c9d 100644
--- a/admin/music.php
+++ b/admin/music.php
@@ -41,6 +41,31 @@
             break;
         case 've':
             $pdo->exec("UPDATE `version` SET `name` = '".addslashes($_GET['name'])."', `number` = '".$_GET['number']."' WHERE `id_version` = '".$_GET['id_version']."';");
+            if(isset($_GET["soprano"])){
+                $pdo->exec("UPDATE `version` SET `soprano` = '1' WHERE `id_version` = ". $_GET['id_version']);
+            }else{
+                $pdo->exec("UPDATE `version` SET `soprano` = '0' WHERE `id_version` = ". $_GET['id_version']);
+            }
+            if(isset($_GET["alto"])){
+                $pdo->exec("UPDATE `version` SET `alto` = '1' WHERE `id_version` = ". $_GET['id_version']);
+            }else{
+                $pdo->exec("UPDATE `version` SET `alto` = '0' WHERE `id_version` = ". $_GET['id_version']);
+            }
+            if(isset($_GET["tenor"])){
+                $pdo->exec("UPDATE `version` SET `tenor` = '1' WHERE `id_version` = ". $_GET['id_version']);
+            }else{
+                $pdo->exec("UPDATE `version` SET `tenor` = '0' WHERE `id_version` = ". $_GET['id_version']);
+            }
+            if(isset($_GET["basse"])){
+                $pdo->exec("UPDATE `version` SET `basse` = '1' WHERE `id_version` = ". $_GET['id_version']);
+            }else{
+                $pdo->exec("UPDATE `version` SET `basse` = '0' WHERE `id_version` = ". $_GET['id_version']);
+            }
+            if(isset($_GET["tutti"])){
+                $pdo->exec("UPDATE `version` SET `tutti` = '1' WHERE `id_version` = ". $_GET['id_version']);
+            }else{
+                $pdo->exec("UPDATE `version` SET `tutti` = '0' WHERE `id_version` = ". $_GET['id_version']);
+            }
             break;
         case 'vd':
             $version = $pdo->query("SELECT * FROM version WHERE `id_version` = '".$_GET['id_version']."' ")->fetch(PDO::FETCH_ASSOC);
@@ -58,6 +83,22 @@
                 }
                 if(move_uploaded_file($_FILES["version"]["tmp_name"], $target)){
                     $pdo->exec("INSERT INTO `version` (`name`, `id_music`, `url`, `number`) VALUES ('".addslashes($_POST['name'])."', '".$_GET['id']."', '".$music['directory'] . "/" . $_POST['name'] . ".mp3"."', '".$_POST['number']."');");
+                    $id = $pdo->lastInsertId();
+                    if(str_contains($_POST["name"], "SOPRANO")){
+                        $pdo->exec("UPDATE `version` SET `soprano` = '1' WHERE `id_version` = ". $id);
+                    }
+                    if(str_contains($_POST["name"], "ALTO")){
+                        $pdo->exec("UPDATE `version` SET `alto` = '1' WHERE `id_version` = ". $id);
+                    }
+                    if(str_contains($_POST["name"], "TENOR")){
+                        $pdo->exec("UPDATE `version` SET `tenor` = '1' WHERE `id_version` = ". $id);
+                    }
+                    if(str_contains($_POST["name"], "BASSE")){
+                        $pdo->exec("UPDATE `version` SET `basse` = '1' WHERE `id_version` = ". $id);
+                    }
+                    if(str_contains($_POST["name"], "TUTTI")){
+                        $pdo->exec("UPDATE `version` SET `tutti` = '1' WHERE `id_version` = ". $id);
+                    }
                 }else{
                     echo "Error";
                 }
@@ -132,6 +173,26 @@
                     <input type="hidden" value="<?php echo $version['id_version'] ?>" name="id_version">
                     <input type="text" required class="form-control" style="width: auto; display: inline;" name="name" value="<?php echo $version['name'] ?>" placeholder="Nom">
                     <input type="number" required class="form-control" style="width: auto; display: inline;" name="number" value="<?php echo $version['number'] ?>" placeholder="Ordre">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="soprano" name="soprano" <?php echo $version['soprano'] == 1 ? "checked" : "" ?>>
+                        <label class="form-check-label" for="soprano">Soprano</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="alto" name="alto" <?php echo $version['alto'] == 1 ? "checked" : "" ?>>
+                        <label class="form-check-label" for="alto">Alto</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="tenor" name="tenor" <?php echo $version['tenor'] == 1 ? "checked" : "" ?>>
+                        <label class="form-check-label" for="tenor">Tenor</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="basse" name="basse" <?php echo $version['basse'] == 1 ? "checked" : "" ?>>
+                        <label class="form-check-label" for="basse">Basse</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" id="tutti" name="tutti" <?php echo $version['tutti'] == 1 ? "checked" : "" ?>>
+                        <label class="form-check-label" for="tutti">Tutti</label>
+                    </div>
                     <input type="submit" class="btn btn-primary" value="Éditer">
                     <audio controls style="width: auto; display: inline; padding: .375rem .75rem;">
                         <source src="/files/<?php echo $version['url'] ?>" type="audio/mpeg">
diff --git a/config_sample.php b/config_sample.php
index fd02bd1..d7581da 100644
--- a/config_sample.php
+++ b/config_sample.php
@@ -14,7 +14,7 @@
     echo 'Connexion échouée : ' . $e->getMessage();
 }
 
-$VERSION = 1;
+$VERSION = 2;
 if(!needsUpdate($pdo, $VERSION)){
     $config = $pdo->query("SELECT * FROM config")->fetchAll(PDO::FETCH_ASSOC);
 
diff --git a/updater/v1.php b/updater/v1.php
index 151d5c2..31d1b60 100644
--- a/updater/v1.php
+++ b/updater/v1.php
@@ -1,8 +1,8 @@
 <?php
-echo "Updating DB";
+echo "Updating DB<br>";
 $pdo->exec(file_get_contents('v1.sql'));
 
-echo "Updating file structure";
+echo "Updating file structure<br>";
 //create folders
 $musics = $pdo->query("SELECT * FROM music")->fetchAll(PDO::FETCH_ASSOC);
 foreach($musics as $music){
diff --git a/updater/v2.php b/updater/v2.php
new file mode 100644
index 0000000..18525ca
--- /dev/null
+++ b/updater/v2.php
@@ -0,0 +1,36 @@
+<?php
+echo "Updating DB Structure<br>";
+$pdo->exec(file_get_contents('v2.sql'));
+
+echo "updating exsisting versions";
+$orphean = array();
+foreach($pdo->query("SELECT * FROM version")->fetchAll(PDO::FETCH_ASSOC) as $v){
+    $found=false;
+    if(str_contains($v["name"], "SOPRANO")){
+        $pdo->exec("UPDATE `version` SET `soprano` = '1' WHERE `id_version` = ". $v["id_version"]);
+        $found=true;
+    }
+    if(str_contains($v["name"], "ALTO")){
+        $pdo->exec("UPDATE `version` SET `alto` = '1' WHERE `id_version` = ". $v["id_version"]);
+        $found=true;
+    }
+    if(str_contains($v["name"], "TENOR")){
+        $pdo->exec("UPDATE `version` SET `tenor` = '1' WHERE `id_version` = ". $v["id_version"]);
+        $found=true;
+    }
+    if(str_contains($v["name"], "BASSE")){
+        $pdo->exec("UPDATE `version` SET `basse` = '1' WHERE `id_version` = ". $v["id_version"]);
+        $found=true;
+    }
+    if(str_contains($v["name"], "TUTTI")){
+        $pdo->exec("UPDATE `version` SET `tutti` = '1' WHERE `id_version` = ". $v["id_version"]);
+        $found=true;
+    }
+    if(!$found){
+        $orphean[] = $v["id_version"];
+    }
+}
+echo "<br><br>id not assigned:<pre>";
+print_r($orphean);
+echo "</pre>";
+
diff --git a/updater/v2.sql b/updater/v2.sql
new file mode 100644
index 0000000..964741d
--- /dev/null
+++ b/updater/v2.sql
@@ -0,0 +1,8 @@
+ALTER TABLE `version`
+ADD `soprano` tinyint unsigned NOT NULL DEFAULT '0',
+ADD `alto` tinyint unsigned NOT NULL DEFAULT '0' AFTER `soprano`,
+ADD `tenor` tinyint unsigned NOT NULL DEFAULT '0' AFTER `alto`,
+ADD `basse` tinyint unsigned NOT NULL DEFAULT '0' AFTER `tenor`,
+ADD `tutti` tinyint unsigned NOT NULL DEFAULT '0' AFTER `basse`;
+
+UPDATE `config` SET `value` = '2' WHERE `id_cfg` = '4';
\ No newline at end of file

From fa2b1e4583b35508f8f6eec834cd31a3bccc814e Mon Sep 17 00:00:00 2001
From: jojoc4 <me@jojoc4.ch>
Date: Thu, 29 Dec 2022 15:41:45 +0100
Subject: [PATCH 2/2] add playlist

---
 folder.php | 277 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 264 insertions(+), 13 deletions(-)

diff --git a/folder.php b/folder.php
index 49194c4..932329c 100644
--- a/folder.php
+++ b/folder.php
@@ -3,16 +3,64 @@
 ?>
 <div class="container-fluid overflow-visible">
     <div class="d-sm-flex justify-content-between align-items-center mb-4">
-        <h3 class="text-dark mb-0"><?php echo $folder['name']; ?></h3><!--<a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#" style="background: rgb(178,21,30);"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Télécharger tout</a>-->
+        <h3 class="text-dark mb-0"><?php echo $folder['name']; ?></h3>
+        <!--<a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#" style="background: rgb(178,21,30);"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Télécharger tout</a>-->
     </div>
     <div class="row">
         <div class="col-lg-12 mb-4">
             <?php
             echo $folder['header'];
-
+            ?>
+            <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                <h6 class="text-primary fw-bold m-0" style="border-color: rgb(178,21,30);border-top-color: rgb(78,;border-right-color: 115,;border-bottom-color: 223);border-left-color: 115,;color: rgb(178,21,30);"  data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i style="color:#888;" class="fa fa-caret-down fa-lg"></i> Tout lire</h6>
+                </div>
+                <div class="card-body collapse" id="collapseExample">
+                    <div class="row m-2" style="margin: 0px;">
+                        <div class="col-8"><span>Soprano</span></div>
+                        <div class="col-4 text-right">
+                            <i style="color:#4e73df; margin-right:11px;" class="fa fa-play-circle plist fa-lg" p="0"></i>
+                        </div>
+                    </div>
+                    <div class="row m-2" style="margin: 0px;">
+                        <div class="col-8"><span>Alto</span></div>
+                        <div class="col-4 text-right">
+                            <i style="color:#4e73df; margin-right:11px;" class="fa fa-play-circle plist fa-lg" p="1"></i>
+                        </div>
+                    </div>
+                    <div class="row m-2" style="margin: 0px;">
+                        <div class="col-8"><span>Tenor</span></div>
+                        <div class="col-4 text-right">
+                            <i style="color:#4e73df; margin-right:11px;" class="fa fa-play-circle plist fa-lg" p="2"></i>
+                        </div>
+                    </div>
+                    <div class="row m-2" style="margin: 0px;">
+                        <div class="col-8"><span>Basse</span></div>
+                        <div class="col-4 text-right">
+                            <i style="color:#4e73df; margin-right:11px;" class="fa fa-play-circle plist fa-lg" p="3"></i>
+                        </div>
+                    </div>
+                    <div class="row m-2" style="margin: 0px;">
+                        <div class="col-8"><span>Tutti</span></div>
+                        <div class="col-4 text-right">
+                            <i style="color:#4e73df; margin-right:11px;" class="fa fa-play-circle plist fa-lg" p="4"></i>
+                        </div>
+                    </div>
+                    <br>
+                    <audio id="playlistplayer" preload="none">
+                        Your browser does not support HTML5 audio.
+                    </audio>
+                    <button type="button" id="playlistplay" class="btn btn-secondary"><i class="fa fa-play-circle fa-lg"></i></button>
+                    <button type="button" id="playlistprev" class="btn btn-secondary"><i class="fa fa-backward fa-lg"></i></button>
+                    <button type="button" id="playlistnext" class="btn btn-secondary"><i class="fa fa-forward fa-lg"></i></button><br>
+                    <span id="current-time">00:00</span> / <span id="duration">00:00</span><br>
+                    <span id=playlistnow>Now playing</span>
+                </div>
+            </div>
+            <?php
             $musics = $pdo->query("SELECT * FROM `folder_music` NATURAL JOIN music WHERE id_fld = " . $_GET['f'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
             foreach ($musics as $music) {
-                ?>
+            ?>
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
                         <h6 class="text-primary fw-bold m-0" style="border-color: rgb(178,21,30);border-top-color: rgb(78,;border-right-color: 115,;border-bottom-color: 223);border-left-color: 115,;color: rgb(178,21,30);"><?php echo $music['name'] ?></h6>
@@ -21,20 +69,20 @@
                         <?php
                         $documents = $pdo->query("SELECT * FROM document WHERE id_music=" . $music['id_music'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
                         if ($documents != null) {
-                            ?>
+                        ?>
                             <h6>Documents</h6>
                             <?php
                             foreach ($documents as $document) {
-                                ?>
+                            ?>
                                 <div class="row m-2" style="margin: 0px;">
                                     <div class="col-8"><span><?php echo $document['name'] ?></span></div>
                                     <div class="col-4 text-right">
-                                        <a style="margin-right:8px;" target="_blank" href="/files/<?php echo $document['url'] ?>"><i class="fa fa-external-link fa-lg"></i></a> 
-                                        <a style="margin-right:8px;" download href="/files/<?php echo $document['url'] ?>"><i class="fa fa-download fa-lg"></i></a> 
+                                        <a style="margin-right:8px;" target="_blank" href="/files/<?php echo $document['url'] ?>"><i class="fa fa-external-link fa-lg"></i></a>
+                                        <a style="margin-right:8px;" download href="/files/<?php echo $document['url'] ?>"><i class="fa fa-download fa-lg"></i></a>
                                         <a class="print" onClick="printPDF('/files/<?php echo $document['url'] ?>');"><i class="fa fa-print fa-lg"></i></a>
                                     </div>
                                 </div>
-                            <?php
+                        <?php
                             }
                         }
                         ?>
@@ -42,11 +90,11 @@
                         <?php
                         $versions = $pdo->query("SELECT * FROM version WHERE id_music=" . $music['id_music'] . " ORDER BY number")->fetchAll(PDO::FETCH_ASSOC);
                         if ($versions != null) {
-                            ?>
+                        ?>
                             <h6 style="margin-top: 8px;">Versions</h6>
                             <?php
                             foreach ($versions as $version) {
-                                ?>
+                            ?>
                                 <div class="row m-2" style="margin: 0px;">
                                     <div class="col-8"><span><?php echo $version['name'] ?></span></div>
                                     <div class="col-4 text-right">
@@ -54,13 +102,216 @@
                                         <a download href="/files/<?php echo $version['url'] ?>"><i class="fa fa-download fa-lg"></i></a>
                                     </div>
                                 </div>
-                            <?php
+                        <?php
                             }
                         }
                         ?>
                     </div>
                 </div>
-<?php } ?>    
+            <?php } ?>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script>
+(function () {            
+    var playlists = [ 
+        [
+            <?php
+            $musics = $pdo->query("SELECT * FROM `folder_music` NATURAL JOIN music WHERE id_fld = " . $_GET['f'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
+            foreach ($musics as $music) {
+                $versions = $pdo->query("SELECT * FROM version WHERE soprano=1 AND id_music=" . $music['id_music'] . " ORDER BY number")->fetchAll(PDO::FETCH_ASSOC);
+                foreach ($versions as $version) {
+                    echo "{name:\"" . $music['name'] . "\", url:\"/files/" . $version['url'] . "\"},\n";
+                }
+            }
+            ?>
+        ],[
+            <?php
+            $musics = $pdo->query("SELECT * FROM `folder_music` NATURAL JOIN music WHERE id_fld = " . $_GET['f'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
+            foreach ($musics as $music) {
+                $versions = $pdo->query("SELECT * FROM version WHERE alto=1 AND id_music=" . $music['id_music'] . " ORDER BY number")->fetchAll(PDO::FETCH_ASSOC);
+                foreach ($versions as $version) {
+                    echo "{name:\"" . $music['name'] . "\", url:\"/files/" . $version['url'] . "\"},\n";
+                }
+            }
+            ?>
+        ],[
+            <?php
+            $musics = $pdo->query("SELECT * FROM `folder_music` NATURAL JOIN music WHERE id_fld = " . $_GET['f'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
+            foreach ($musics as $music) {
+                $versions = $pdo->query("SELECT * FROM version WHERE tenor=1 AND id_music=" . $music['id_music'] . " ORDER BY number")->fetchAll(PDO::FETCH_ASSOC);
+                foreach ($versions as $version) {
+                    echo "{name:\"" . $music['name'] . "\", url:\"/files/" . $version['url'] . "\"},\n";
+                }
+            }
+            ?>
+        ],[
+            <?php
+            $musics = $pdo->query("SELECT * FROM `folder_music` NATURAL JOIN music WHERE id_fld = " . $_GET['f'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
+            foreach ($musics as $music) {
+                $versions = $pdo->query("SELECT * FROM version WHERE basse=1 AND id_music=" . $music['id_music'] . " ORDER BY number")->fetchAll(PDO::FETCH_ASSOC);
+                foreach ($versions as $version) {
+                    echo "{name:\"" . $music['name'] . "\", url:\"/files/" . $version['url'] . "\"},\n";
+                }
+            }
+            ?>
+        ],[
+            <?php
+            $musics = $pdo->query("SELECT * FROM `folder_music` NATURAL JOIN music WHERE id_fld = " . $_GET['f'] . " ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
+            foreach ($musics as $music) {
+                $versions = $pdo->query("SELECT * FROM version WHERE tutti=1 AND id_music=" . $music['id_music'] . " ORDER BY number")->fetchAll(PDO::FETCH_ASSOC);
+                foreach ($versions as $version) {
+                    echo "{name:\"" . $music['name'] . "\", url:\"/files/" . $version['url'] . "\"},\n";
+                }
+            }
+            ?>
+        ]
+    ];
+    var trackTime = function(seconds) {
+        var min = 0;
+        var sec = Math.floor(seconds);
+        var time = 0;
+        min = Math.floor(sec / 60);
+        min = min >= 10 ? min : '0' + min;
+        sec = Math.floor(sec % 60);
+        sec = sec >= 10 ? sec : '0' + sec;
+        time = min + ':' + sec;
+
+        return time;
+  };
+
+    var player = document.getElementById('playlistplayer');
+    var prev = document.getElementById('playlistprev');
+    var next = document.getElementById('playlistnext');
+    var play = document.getElementById('playlistplay');
+    var now = document.getElementById('playlistnow');
+    var curent = document.getElementById('current-time');
+    var duration = document.getElementById('duration');
+    var playlistButoon = document.getElementsByClassName('plist');
+    var songId = null;
+    var playlist = null;
+    var playing=false;
+
+    play.disabled=true;
+    prev.disabled=true;
+    next.disabled=true;
+    now.innerHTML = "Aucune voix sélectionnée";
+    curent.innerHTML = "00:00";
+    duration.innerHTML = "00:00";
+
+    player.addEventListener("error", function(e) {
+        switch (e.target.error.code) {
+            case e.target.error.MEDIA_ERR_ABORTED:
+            alert('You aborted the playback.');
+            break;
+            case e.target.error.MEDIA_ERR_NETWORK:
+            alert('A network error caused the audio download to fail.');
+            break;
+            case e.target.error.MEDIA_ERR_DECODE:
+            alert('The audio playback was aborted due to a corruption problem or because the video used features your browser did not support.');
+            break;
+            case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+            alert('The audio not be loaded, either because the server or network failed or because the format is not supported.');
+            break;
+            default:
+            alert('An unknown error occurred.');
+            break;
+        }
+        songId = null;
+        playlist = null;
+        play.disabled=true;
+        prev.disabled=true;
+        next.disabled=true;
+        now.innerHTML = "Aucune voix sélectionnée";
+        curent = "00:00";
+        duration = "00:00";
+    }, false);
+
+    player.addEventListener("play", function(e) {
+        playing=true;
+        play.innerHTML = '<i class="fa fa-pause-circle fa-lg"></i>';
+    }, false);
+
+    player.addEventListener("pause", function(e) {
+        playing=false;
+        play.innerHTML = '<i class="fa fa-play-circle fa-lg"></i>';
+    }, false);
+
+    player.addEventListener("ended", function(e) {
+        songId++;
+        if (songId < playlists[playlist].length) {
+            now.innerHTML = playlists[playlist][songId].name;
+            player.src = playlists[playlist][songId].url;
+            player.load();
+            player.play();
+            prev.disabled=false;
+            if(songId == playlists[playlist].length-1) {
+                next.disabled=true;
+            }
+        } else {
+            songId = null;
+            playlist = null;
+            play.disabled=true;
+            prev.disabled=true;
+            next.disabled=true;
+            now.innerHTML = "Aucune voix sélectionnée";
+            curent = "00:00";
+            duration = "00:00";
+        }
+    }, false);
+
+    player.addEventListener("timeupdate", function(e) {
+        curent.innerHTML = trackTime(player.currentTime);
+        duration.innerHTML = trackTime(player.duration);
+    }, false);
+
+    prev.addEventListener("click", function(e) {
+        if (songId > 0) {
+            songId--;
+            now.innerHTML = playlists[playlist][songId].name;
+            player.src = playlists[playlist][songId].url;
+            player.load();
+            player.play();
+            next.disabled=false;
+            if(songId == 0) {
+                prev.disabled=true;
+            }
+        }
+    }, false);
+
+    next.addEventListener("click", function(e) {
+        if (songId < playlists[playlist].length-1) {
+            songId++;
+            now.innerHTML = playlists[playlist][songId].name;
+            player.src = playlists[playlist][songId].url;
+            player.load();
+            player.play();
+            prev.disabled=false;
+            if(songId == playlists[playlist].length-1) {
+                next.disabled=true;
+            }
+        }
+    }, false);
+
+    play.addEventListener("click", function(e) {
+        if (playing) {
+            player.pause();
+        } else {
+            player.play();
+        }
+    }, false);
+
+    for(var i=0; i<playlistButoon.length; i++) {
+        playlistButoon[i].addEventListener("click", function(e) {
+            playlist = this.getAttribute("p");
+            songId = 0;
+            play.disabled=false;
+            next.disabled=false;
+            now.innerHTML = playlists[playlist][songId].name;
+            player.src = playlists[playlist][songId].url;
+            player.load();
+            player.play();
+        }, false);
+    }
+})();
+</script>
\ No newline at end of file