2

I'm creating a loadingscreen based on html that uses .mp3/ogg songs to play the music. I'm a newbie, and not a lazy one, I have almost 120 forums opened in the path of finding the the solution for this, and it's been a huge headache. I want to randomize it after a refresh, and stop/start the music using 'space' It does play only one song, obviously and I can't find a tutorial on YouTube/Forum to make this.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <script src="vue.min.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700" rel="stylesheet">
</head>

<body>
    <h1 class="enable_music">Use the <strong>spacebar</strong> to toggle the music</h1>
    <div id="app">
        <div id="keepingColor">
            <div id="background">
                <video id="myVideo" width="100%" height="100%" playsinline autoplay data-autoplay loop muted>
                    <source src="loading.mp4" type="video/mp4">
            </div>
        </div>
            
        <div id="logo">
            <div class="log-containter" v-if="showLog">
            <div class="log-header"></div>
            <div id="log" class="log">Error initializing log</div>
            <div class="log-footer"></div>
        </div>

        <div id="debug" class="log log-top-right"></div>
            <div class="loading-container">
                <div class ="loading-labels">
                    <div id="INIT_BEFORE_MAP_LOADED-label" class="color-first"></div>
                    <div id="MAP-label" class="color-second"></div>
                    <div id="INIT_AFTER_MAP_LOADED-label" class="color-third"></div>
                    <div id="INIT_SESSION-label" class="color-fourth"></div>
                </div>
                <div class="loading-bar-container">
                    <div id="INIT_BEFORE_MAP_LOADED-bar" class="loading-bar bgcolor-first"></div>
                    <div id="MAP-bar" class="loading-bar bgcolor-second"></div>
                    <div id="INIT_AFTER_MAP_LOADED-bar" class="loading-bar bgcolor-third"></div>
                    <div id="INIT_SESSION-bar" class="loading-bar bgcolor-fourth"></div>
                </div>
            </div>
        </div>  
    </head>
        </div>
</div>
</div>

    <script src="script.js" type="text/javascript"></script>
    <audio id="leson" src="music/1.mp3" autoplay="true" hidden="true" loop="true"/>
    
    <script>
    var play = false;
    var myAudio = document.getElementById("leson");
    
    myAudio.volume = 0.25;

    function onKeyDown(event) {
            switch (event.keyCode) {
                case 32: //SpaceBar                    
                    if (play) {
                        myAudio.pause();
                        play = false;
                    } else {
                        myAudio.play();
                        play = true;
                    }
                    break;
            }
      return false;
    }

    window.addEventListener("keydown", onKeyDown, false);
    </script>
</body>
</html>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
solo2k
  • 21
  • 3
  • Do you have several urls up to mp3 files and you want to randomly run any of the mp3 files when the page starts? – s.kuznetsov Apr 27 '21 at 16:55
  • see this good examples - https://stackoverflow.com/questions/37635281/playing-random-sounds-continuously-on-the-page **and** https://stackoverflow.com/questions/39604400/play-a-random-sound-on-single-button – s.kuznetsov Apr 27 '21 at 17:13

0 Answers0