Music player playing random music while clicking on an image

I want to build a site, where you will be able to click on an image and by doing that, the site will generate mp3 player with random music below and also some text before and after the mp3 player. I have the code for my mp3 player here:

>     <audio class="audio-element" controls="true" preload="none">
>     <source src="mp3.mp3" type="audio/mpeg"></source>           
>     <b>Your outdated browser does not support HTML5. <br>
>     Get Mozilla Firefox <a href="http://ift.tt/1rRPfBa"> >HERE< </a></b>       
>     </audio>

And my script to random song here:

var numberOfSongs = 3
var sound = new Array(numberOfSongs+1)
sound[0]= "mp3-1.mp3"
sound[1]= "mp3-2.mp3"
sound[2]= "mp3-3.mp3
function randomNumber(){
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){    randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
    return randomLooper
}
var randomsub = randomNumber()
var soundFile = sound[randomsub]
document.write ('<mp3 player code here>')
}

How can i combine them both, so it will work like that:

1. Logo + background + image to click loaded

2. Person clicks on an image

3. The script chooses a song to play and generates text about it and mp3 player below

4. If person clicks the image one more time, it generates new text and new music

Sorry guys for bothering you, but i have no one to ask :( Thanks for help!

P.S. Sorry for my bad English, its not my native language :)