Konzept für Custom Musik im Loadingscreen

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Konzept für Custom Musik im Loadingscreen

      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-Quellcode

      1. <?php session_start(); ?>
      2. <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
      3. <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
      4. <script>
      5. window.addEventListener("load", function(){
      6. window.cookieconsent.initialise({
      7. "palette": {
      8. "popup": {
      9. "background": "#000"
      10. },
      11. "button": {
      12. "background": "#f1d600"
      13. }
      14. }
      15. })});
      16. </script>
      17. <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
      18. <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
      19. <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
      20. <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
      21. <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
      22. <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
      23. <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
      24. <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
      25. <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
      26. <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
      27. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
      28. <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
      29. <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
      30. <link rel="manifest" href="/manifest.json">
      31. <meta name="msapplication-TileColor" content="#ffffff">
      32. <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
      33. <meta name="theme-color" content="#ffffff">
      34. <font size="20">
      35. <html>
      36. <head>
      37. <link rel="stylesheet" href="index_css.css">
      38. </head>
      39. <head>
      40. <meta name="viewport" content="width=device-width, initial-scale=1">
      41. <style>
      42. body {
      43. margin: 0;
      44. font-size: 10px;
      45. }
      46. .header {
      47. background-color: #f1f1f1;
      48. padding: 30px;
      49. text-align: center;
      50. }
      51. #navbar {
      52. overflow: hidden;
      53. background-color: #333;
      54. }
      55. #navbar a {
      56. float: left;
      57. display: block;
      58. color: #f2f2f2;
      59. text-align: center;
      60. padding: 14px 16px;
      61. text-decoration: none;
      62. font-size: 17px;
      63. }
      64. #navbar a:hover {
      65. background-color: #ddd;
      66. color: black;
      67. }
      68. #navbar a.active {
      69. background-color: #4CAF50;
      70. color: white;
      71. }
      72. .content {
      73. padding: 16px;
      74. }
      75. .sticky {
      76. position: fixed;
      77. top: 0;
      78. width: 100%;
      79. }
      80. .sticky + .content {
      81. padding-top: 60px;
      82. }
      83. .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; }
      84. .css-input:focus { outline:none; }
      85. .container {
      86. position: relative;
      87. width: 50%;
      88. }
      89. .image {
      90. opacity: 1;
      91. display: block;
      92. width: 100%;
      93. height: auto;
      94. transition: .5s ease;
      95. backface-visibility: hidden;
      96. }
      97. .middle {
      98. transition: .5s ease;
      99. opacity: 0;
      100. position: absolute;
      101. top: 50%;
      102. left: 50%;
      103. transform: translate(-50%, -50%);
      104. -ms-transform: translate(-50%, -50%);
      105. text-align: center;
      106. }
      107. .container:hover .image {
      108. opacity: 0.3;
      109. }
      110. .container:hover .middle {
      111. opacity: 1;
      112. }
      113. .text {
      114. background-color: #4CAF50;
      115. color: white;
      116. font-size: 16px;
      117. padding: 16px 32px;
      118. }
      119. </style>
      120. </head>
      121. <body>
      122. <div class="header">
      123. <h2>Peridots Site</h2>
      124. <p>Here you can find some random stuff!</p>
      125. </div>
      126. <div id="navbar">
      127. <a href="http://peridotpower.bplaced.net/">Home</a>
      128. <a href="javascript:void(0)">News</a>
      129. <a href="javascript:void(0)">Contact</a>
      130. <a class="active" href="http://peridotpower.bplaced.net/song_selection.php">Song Selection</a>
      131. </div>
      132. <p>
      133. <p>
      134. <?php
      135. $song=$_SESSION["lied"];
      136. ?>
      137. <center>
      138. <div class="container">
      139. <img src="here.PNG" alt="Avatar" class="image" style="width:100%">
      140. <div class="middle">
      141. <div class="text">Copy this part of the link in the box below</div>
      142. </div>
      143. </div>
      144. Current Song<p>
      145. <img src="https://img.youtube.com/vi/<?php echo $song; ?>/1.jpg" alt="Avatar" class="image" style="width:15%">
      146. <iframe width="0" height="0" src="https://www.youtube.com/embed/<?php echo $song; ?>?&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      147. <form action="http://peridotpower.bplaced.net/" method="post">
      148. <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="">
      149. <p style="padding-left:100px;"> </p>
      150. </form>
      151. </body>
      152. </html>
      153. </center>
      154. <div>
      155. </div>
      156. <?php
      157. if($_POST["user"]!=null) {
      158. $_SESSION["lied"]=$_POST["user"];
      159. }
      160. ?>
      161. <script>
      162. window.onscroll = function() {myFunction()};
      163. var navbar = document.getElementById("navbar");
      164. var sticky = navbar.offsetTop;
      165. function myFunction() {
      166. if (window.pageYOffset >= sticky) {
      167. navbar.classList.add("sticky")
      168. } else {
      169. navbar.classList.remove("sticky");
      170. }
      171. }
      172. </script>
      Alles anzeigen

      Mit freundlichen Grüßen,
      Peridotpower

      Dieser Beitrag wurde bereits 20 mal editiert, zuletzt von Peridot ()