Play Random Music

Question

I want to play random sound tracks on my website.. Without any forward/rewind control.. The code i am using for it is..

<script type="text/javascript">
var a = Math.random()*2;
a=Math.floor(a);

if(a==1)
{alert(a); document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='6.ogg' type='audio/ogg'>Your browser does not support the audio element.</audio>";}
if(a==0)
{alert("hello");document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='5.ogg' type='audio/ogg'>Your browser does not support the audio element.</audio>";}

</script>

<div id="soundtrack">

</div>

But this code is not playing anything.. (alert is going very well) What should i do to???

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, May 11 '19 at 22:12

score 0 · Accepted Answer · answered Jan 18 '13 at 07:51

Actually the div is not initialized when you run the script. You need to place it in onload hadler. This example works for me:

<script type="text/javascript">
function play()
{
    var a = Math.random()*2;
    a=Math.floor(a);

    if(a==1)
    {
        alert(a); 
        document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='1.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
    }
    if(a==0)
    {
        alert(document.getElementById('soundtrack'))
        document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='0.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
    }
}
</script>
<body onload="play()">;
<div id="soundtrack">

</div>
</body>

score 0 · Answer 2 · answered Jan 18 '13 at 08:05

This is (one reason) why it is a good idea to put your JavaScript at the end of the BODY tag. As Mikhail said, the DIV tag is not yet loaded when the script runs. The HTML page is processed in the order you type in (unless you use functions and event handlers). A simple fix for this would be to just move the DIV to the top of the page like this:

<html>
<body>
<div id="soundtrack"></div>

<script type="text/javascript">
var a = Math.random()*2;
a=Math.floor(a);

if(a==1)
{alert(a); document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='6.ogg' type='audio/ogg'>Your browser does not support the audio element.</audio>";}
if(a==0)
{alert("hello");document.getElementById('soundtrack').innerHTML="<audio id='background_audio1' loop autoplay><source src='5.ogg' type='audio/ogg'>Your browser does not support the audio element.</audio>";}

</script>
</body>
</html>

It is not a good idea to mix JS code and view in HTML. It would be hard to understand the code. Also, there is no any specifications for HTML parsing order in different browsers so you should rely on onload (or other event) only. — Mikhail Payson, Jan 18 '13 at 10:41

Play Random Music

2 Answers2

Linked