14audio.html

<canvas id='c'></canvas>
<audio id="sound">
  <source src="SuperMarioBros.mp3" type="audio/mpeg">
</audio>
<script>
    var c = document.getElementById('c').getContext('2d')
    var x = 300                     // initial pipe position
    var my = 102                    // initial mario position
    var s = 0                       // initial speed
    
    window.onclick = function()     // jump, upwards force hence negative
    { if (my >= 102) 
        s = -3.5 
        document.getElementById("sound").play()
    }     
    
    draw()
    function draw(){
    c.fillStyle = 'skyblue'
    c.fillRect(0,0,300,150)

    c.fillStyle = 'brown'
    c.fillRect(0,130,300,20)
    
    c.fillStyle = 'green'
    c.fillRect(x,100,30,50)
    c.fillRect(x-10,80,50,20)
    
    x = x - 5                       // move pipe left
    if (x == -50)   x = 300         // if off screen left move to right side
    
    var mario = new Image()
    mario.src = "http://i66.tinypic.com/2e3tvsj.gif"
    c.drawImage(mario,50,my)
    
    my = my + s                     // initially 0 then -3.5 onclick
    if (my < 102)  s = s + 0.1      // downward force
    if (my > 102)  s = 0            // stop on floor
        
    if (!(x == 65 && my >= 102)) requestAnimationFrame(draw)
    }
</script>