CODEWITHSUNDEEP
javascripthtmlaudiohtml5-audio
Senor Penguin
Senor Penguin

Reputation: 405

Randomize Audio Played in HTML

hoping to get a little help here. I have this HTML code that plays an audio file from a local folder. I want to add a couple more audio files and have it a play a random file from the array. I have been searching a lot and trying different things but I haven't found anything that works exactly for my application.

Below is the code I am currently using for one audio file which works just fine. I really apologize for sloppy script, HTML is not my specialty and I took this from somewhere else:

<div>

   <audio id='music' volume='0.1' autoplay controls>

       <source src="myfile.mp3" type="audio/mpeg">
       Your browser does not support the audio element.    

   </audio>

           <script>
               var audio = document.getElementById("music");
               audio.volume = 0.4;
           </script>        

</div>

I have an idea of what I am trying to do based on what I have found for loading random images, I just cannot figure out how to incorporate the same method into my audio file. I know I am asking for someone to basically write this for me but is there a way to use the method below but for audio in my HTML file?

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'image1.jpg';
    ImageArray[1] = 'iamge2.jpg';
    ImageArray[2] = 'iamge3.jpg';
    ImageArray[3] = 'iamge4.jpg';



function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" 
width="250px">')

}
</script>
</head>

Upvotes: 2

Views: 1658

Answers (2)

Senor Penguin
Senor Penguin

Reputation: 405

This is the exact code that ended up working for me, again this HTML file is loaded in a game server as a loading screen so it wont auto play in a browser unless you do the things mentioned by 54ka above.

<audio id='music' controls autoplay>

  <source src="" type="audio/mpeg">

</audio>

  <script>
    function myFunction() {
       fileArray = ["song1.mp3", "song2.mp3", "song3.mp3"];
       var num = Math.floor(Math.random() * fileArray.length);
       var x = document.getElementById("music");
       x.src = fileArray[num]; 

       var audio = document.getElementById("music");
       audio.volume = 0.2;
       audio.autoplay = true;
       audio.load();
    }

    myFunction()

  </script>

Upvotes: 2

54ka
54ka

Reputation: 3589

I hope I've been helpful

<audio id="music" volume="0.1" autoplay controls>
</audio>

<script type="text/javascript">
    function addAudio() {
        fileArray = ["file1.mp3", "file2.mp3", "file3.mp3"]
        var num = Math.floor(Math.random() * fileArray.length);
        var x = document.getElementById("music");
        x.innerHTML = "";
        x.innerHTML += '<source src="audio/' + fileArray[num] + '" type="audio/mpeg">';

        x.play(); 
    }
    addAudio();
</script>

EDIT: Before the browser does something automatically, it requires the user to take some action! My advice is to make the first screen which after interaction calls the next one to start the music. Here I gave you an example.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>

    <div id="screen" onclick="addAudio();secondScreen();" style="position: absolute; top:0px; right: 0px; bottom: 0px; left: 0px;">
        Some Firts Screen (click)
    </div>

    <audio id="music" volume="1">
    </audio>

    <script type="text/javascript">
        function addAudio() {
            fileArray = ["file1.mp3", "file2.mp3", "file3.mp3"]
            var num = Math.floor(Math.random() * fileArray.length);
            var x = document.getElementById("music");
            x.innerHTML = "";
            x.innerHTML += '<source src="audio/' + fileArray[num] + '" type="audio/mpeg">';

            x.play(); 
        }

        function secondScreen() {
            document.getElementById("screen").innerHTML = "Second Screen"
        }
    </script>

</body>
</html>

Upvotes: 4

Related Questions