[style]backgroundmusic

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • [style]backgroundmusic

      this is not the best mod, since it is running in an iframe, it has some gliches with the fullscreenmode of the 2moons skin 1.8 fullscreen-mode. this can be fixed if nessesary.
      iframe is a browserwindow in a browserwindow. as the mod is just a play around, its not so important i think.
      here is an example test
      make a test.html in your gamefolder, copy following code in it, and save it. call it with the browser. should show your game with music in the right bottom corner u'll find the player controles. hover it for playlist and controling it

      HTML Source Code

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>2moons</title>
      6. <script type="text/javascript" src="./scripts/base/jquery.js"></script>
      7. </head>
      8. <style>
      9. #playlist,audio{
      11. width:200px;
      12. padding:0px;
      13. margin:0px;
      14. }
      15. .active a{
      16. color:#5DB0E6 !important;
      17. text-decoration:none;
      18. }
      19. #playlist li a{
      20. text-decoration:none;
      21. color:#eeeedd;
      22. background:none;
      23. padding:0px;
      24. padding-right:2px;
      25. display:block;
      26. }
      27. #playlist li a:hover{
      28. background:#333;
      29. }
      30. #moonsframe{
      31. width: 100vw;
      32. height:100vh;
      33. background:#000;
      34. border:0px;
      36. }
      37. #bmusic{
      38. transform: scale(0.4);
      39. position: absolute;
      40. bottom: -120px;
      41. right: -59px;
      42. width: 200px;
      43. }
      44. #bmusic:hover{
      45. transform: scale(1.0);
      46. bottom:0px;
      47. right:20px;
      48. }
      49. </style>
      50. <body style="margin:0px; overflow:hidden;">
      51. <div id="bmusic" >
      52. <audio id="audio" preload="auto" controlsList="nodownload" tabindex="1" controls="controls" type="audio/ogg" >
      53. <source type="audio/ogg" src="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
      54. Sorry, your browser does not support HTML5 audio.
      55. </audio>
      56. <ul id="playlist" style="background:#000; height:150px; text-align:right; overflow-y:scroll;">
      57. <li ><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
      58. <li class="active"><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
      59. <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
      60. <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>
      62. </ul>
      63. <script>
      64. var audio;
      65. var playlist;
      66. var tracks;
      67. var current;
      69. init();
      70. function init(){
      71. current = 0;
      72. audio = $('audio');
      73. playlist = $('#playlist');
      74. tracks = playlist.find('li a');
      75. len = tracks.length - 1;
      76. audio[0].volume = .30;
      77. audio[0].play();
      78. playlist.find('a').click(function(e){
      79. e.preventDefault();
      80. link = $(this);
      81. current = link.parent().index();
      82. run(link, audio[0]);
      83. });
      84. audio[0].addEventListener('ended',function(e){
      85. current++;
      86. if(current == len){
      87. current = 0;
      88. link = playlist.find('a')[0];
      89. }else{
      90. link = playlist.find('a')[current];
      91. }
      92. run($(link),audio[0]);
      93. });
      94. }
      95. function run(link, player){
      96. player.src = link.attr('href');
      97. par = link.parent();
      98. par.addClass('active').siblings().removeClass('active');
      99. audio[0].load();
      100. audio[0].play();
      101. }
      102. </script>
      103. </div>
      104. <iframe id="moonsframe" src="index.php"></iframe>
      105. </body>
      107. </html>
      Display All

    • this is great.....i have a video background that I made awhile ago for the background environment ....but I couldn't keep it going even when the pages got refreshed or changed.....im goimgvto mess around with this if it's ok but it might work to have a video back round that continues even if the page changes...ill post in a couple of days the results

    • Я правильно понял Вас , Вы хотите добавить на вход при старте видео ? у меня есть такое решение. могу скинуть я его доработал и на весь экран развернул . если внутри игры то можно использовать штатный гугловский код и сделать анимацию планеты в окне если только при входе вот можете на тесте глянуть но он не доделан.. скоро обновлю будет красиво если что с кодом поделюсь скажу куда что вставить. так как чтоб развернуть видео на весь экран надо дописывать ряд пунктов и затирать ограничения в css.. planet-of-free-people.com/index.php глянуть пример оформления можно тут. через неделю оно будет другое полностью сделанное

      в css (в обнове буду код облегчать и делать меньше)
      1. .home-banner-section {

        1. z-index: 3;
        2. display: table;
        3. box-sizing: border-box;
        4. border-top: 10px;
        5. border-top-left-radius: 15em 1em;
        6. border-top-right-radius: 15em 1em;
        7. border-bottom-left-radius: 15em 1em;
        8. border-bottom-right-radius: 15em 1em;
        9. background: url(../../images/homepage/stukov-frame1.jpg) 0 0 no-repeat;
        10. text-align: center;
        11. background-color: transparent;
        12. opacity: 0.5;
        1. .background-video {
          1. position: absolute;
          2. width: 100%;
          3. top: 0;
          4. left: 0;
          5. position: fixed;
          6. min-width: 100%;
          7. min-height: 100%;
          8. width: auto;
          9. height: auto;
          10. z-index: -100;



      .bg-wrapper {

      1. position: relative;
      2. background: url(../../media/images/st.png);
      }

      index tpl
      <div class="home-banner-section">
      <div class="background-video">

      <video class="background-video" autoplay="autoplay" loop="loop">
      <source src="/media/start1.mp4" type="video/mp4"></source>
      </video>
      </div>
      <div class="home-banner">

      ну и ряд парметров в css чтоб все работало было уже затерто иначе видео на весь экран не будет

      The post was edited 2 times, last by loki ().

    • Thanks for sharing!
      i like it very much ♥

      my lil changes to control the volume:

      CSS part in the same file between the <style>...</style>

      CSS Source Code

      1. #playlist,audio{
      2. width:200px;
      3. padding:0px;
      4. margin:0px;
      5. border:1px solid blue;
      6. }
      7. .active a{
      8. color:#5DB0E6 !important;
      9. text-decoration:none;
      10. }
      11. #playlist li a{
      12. text-decoration:none;
      13. text-align:left;
      14. color:#eeeedd;
      15. background:none;
      16. padding:0px;
      17. padding-right:2px;
      18. display:block;
      19. }
      20. #playlist li a:hover{
      21. background:#333;
      22. }
      23. #moonsframe{
      24. width: 100vw;
      25. height:100vh;
      26. background:#000;
      27. border:0px;
      28. }
      29. #bmusic{
      30. transform: scale(0.45);
      31. position: absolute;
      32. bottom: -85px;
      33. right: -55px;
      34. width: 200px;
      35. }
      36. #bmusic:hover{
      37. transform: scale(1.0);
      38. bottom:0px;
      39. right:20px;
      40. }
      41. /* Volume slider */
      42. #volume-slider {
      43. width: 60px;
      44. -webkit-appearance: none; /* Remove default styling */
      45. height: 5px;
      46. background: #5DB0E6;
      47. border-radius: 5px;
      48. margin: 5px;
      49. }
      51. #volume-slider::-webkit-slider-thumb {
      52. -webkit-appearance: none;
      53. width: 8px;
      54. height: 8px;
      55. background: #d3d3d3;
      56. border-radius: 50%;
      57. cursor: pointer;
      58. }
      59. /* Volume display */
      60. #volume-display {
      62. color:#eeeedd;
      63. margin-bottom: 5px;
      64. padding-right:5px;
      65. }
      Display All


      HTML part between <body>...</body>

      HTML Source Code

      1. <div id="bmusic" >
      2. <audio id="audio" preload="auto" controlsList="nodownload" tabindex="1" controls="controls" type="audio/mp3" >
      3. <source type="audio/mpeg" src="YOUR WELCOME-MP3,BASE64 OR STREAM-URL">
      4. Sorry, your browser does not support HTML5 audio.
      5. </audio>
      6. <ul id="playlist" style="background:#000; height:100px; text-align:right; overflow-y:scroll;">
      7. <li class="active"><p><input type="range" min="0" max="1" step="0.01" id="volume-slider" /> <span id="volume-display">Volume: 65% </span></p><a href="">Willkommen!</a> </li>
      8. <li><a href="http://hirschmilch.de:7000/psytrance.mp3">Hirschmilch Psytrance</a></li>
      9. <li><a href="#YOURSOUND#">YOURSOUND</a></li>
      10. <!-- put all your sounds or streams here like the #YOURSOUND# line -->
      11. </ul>
      12. </div>
      13. <iframe id="moonsframe" src="index.php"></iframe>
      Display All

      JAVASCRIPT-part at last before the closing </body>

      JavaScript Source Code

      1. <script>
      2. var audio;
      3. var playlist;
      4. var tracks;
      5. var current;
      6. const volumeSlider = document.getElementById("volume-slider");
      7. const volumeDisplay = document.getElementById("volume-display"); // Optional
      8. init();
      9. function init(){
      10. current = 0;
      11. audio = $('audio');
      12. playlist = $('#playlist');
      13. tracks = playlist.find('li a');
      14. len = tracks.length - 1;
      15. audio[0].volume = .65;
      16. audio[0].play();
      17. playlist.find('a').click(function(e){
      18. e.preventDefault();
      19. link = $(this);
      20. current = link.parent().index();
      21. run(link, audio[0]);
      22. });
      23. audio[0].addEventListener('ended',function(e){
      24. audio[0].pause();
      26. });
      27. volumeSlider.addEventListener("input", () => {
      28. audio[0].volume = volumeSlider.value;
      29. updateVolumeDisplay(); // Optional
      30. });
      31. }
      32. function run(link, player){
      33. player.src = link.attr('href');
      34. par = link.parent();
      35. par.addClass('active').siblings().removeClass('active');
      36. audio[0].load();
      37. audio[0].play();
      38. }
      39. function updateVolumeDisplay() {
      40. volumeDisplay.textContent = `Volume: ${Math.floor(audio[0].volume * 100)}%`;
      41. }
      42. </script>
      Display All

      now you should have a "Welcome-Sound" in a tiny player and "volume-control" in the playlist part
      because the <audio> syntax has volume only implemented as hardcodet part, but no controlls.
      maybe your favorite browser show but not so my firefox... and not in a so tiny player ;)

      i´m using a base64 codet Welcome-sound because my hoster doesn´t allow audio-files.

      Es zählt nicht wie lang man lebt, sondern wie intensiv. • Euer Mond ist meine Sonne, Euer Montag - mein Sonntag. • Musik ist Leben!

      ⭐Psy ♫ Love ♥ Is ॐ My ♫ Love⭐