Hallo hier mal was kleines, das ich vor kurzem gemacht habe.
Es ist ein kleines Beispiel wie jeder Benutzer, wenn es im Loading screen eingefügt wird seine Musik beim joinen auf die Instinkt Server personalisieren kann.
Es funktioniert ganz einfach:
Hier mal eine kleine Demo wie das ganze funktioniert: Peridot.CF
Einfach klicken und dann im Menü-Reiter auf Songselection klicken.
Hier könnt ihr nun euren Song wählen.
Ihr könnt jeden Song nehmen, der auf Youtube existiert.
Ihr müsst dafür nur wie auf der Seite beschrieben, den Teil hinter dem "https://www.youtube.com/watch?v=" kopieren und auf der Seite im Türkisen Feld einfügen und dann enter drücken.
Würde dann bei dem folgendem Link so aussehen: "https://www.youtube.com/watch?v=D7ztZ_qhx5Q" ----> "D7ztZ_qhx5Q "also nur den Hinteren Teil nehmen.
Nun hört ihr die Musik im Hintergrund auf der Website, genau so kann es auch auf dem Server laufen.
Wenn ihr 0 eigebt ist die Musik deaktiviert.
Falls ihr kein Bock habt Judtube zuöffnen ihr ein paar Beispiele:
vTIIMJ9tUc8
U9t-slLl30E
FBnAZnfNB6U
BGa3GKs5Ttw
O3rpmctmC_M
Man könnte im UCP eine Seite machen zum wählen des Songs und die Auswahl mit Cookies hinterlegen lassen. / oder auf die Steamid64 speichern
<?php session_start(); ?>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#000"
},
"button": {
"background": "#f1d600"
}
}
})});
</script>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<font size="20">
<html>
<head>
<link rel="stylesheet" href="index_css.css">
</head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-size: 10px;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.css-input { padding:3px; font-size:15px; border-width:80px; border-style:inset; border-color:#119992; box-shadow: 0px 0px 5px 0px rgba(42,42,42,.75); font-weight:bold; font-family:sans-serif; font-style:none; }
.css-input:focus { outline:none; }
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<div class="header">
<h2>Peridots Site</h2>
<p>Here you can find some random stuff!</p>
</div>
<div id="navbar">
<a href="http://peridotpower.bplaced.net/">Home</a>
<a href="javascript:void(0)">News</a>
<a href="javascript:void(0)">Contact</a>
<a class="active" href="http://peridotpower.bplaced.net/song_selection.php">Song Selection</a>
</div>
<p>
<p>
<?php
$song=$_SESSION["lied"];
?>
<center>
<div class="container">
<img src="here.PNG" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">Copy this part of the link in the box below</div>
</div>
</div>
Current Song<p>
<img src="https://img.youtube.com/vi/<?php echo $song; ?>/1.jpg" alt="Avatar" class="image" style="width:15%">
<iframe width="0" height="0" src="https://www.youtube.com/embed/<?php echo $song; ?>?&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<form action="http://peridotpower.bplaced.net/" method="post">
<h1 style="margin:0; margin-top:50px; padding:0; padding-left:90px; padding-bottom:40px; font-family:sans-serif;"></h1><input type="text" class="css-input" name="user" value="">
<p style="padding-left:100px;"> </p>
</form>
</body>
</html>
</center>
<div>
</div>
<?php
if($_POST["user"]!=null) {
$_SESSION["lied"]=$_POST["user"];
}
?>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>