Adding a background music and dropping of balls functionality in ionic


#1

I wrote a ionic page for dropping of balls:
When I load the page, a music should be played automatically. When I click on Past, Present and Future buttons, balls should drop into respective buckets.
Here is the code:
Controller

ballCtrl.controller('ballCtrl', ['$scope','$state', function($scope,$state) {
    var i;
    var counter = 1800;
    var audio = new Audio('lib/lemongrass--ByShankarTucker.mp3');
    // document.getElementById('').play();
    audio.play();
    for (i = 0; i <= counter; i++) {
        counter--;
        canvases = document.getElementsByTagName('canvas'),
        context = [],
        interval,
        boxWidth = 150,
        ballRadius = 10,
        canvasHeight = 265;
        for (var j = 0; j < canvases.length; j++) {
            context.push(canvases[j].getContext('2d'));
        }
    } 

    function draw() {
        canvases = document.getElementsByTagName('canvas'),
        context = [],
        interval,
        boxWidth = 150,
        ballRadius = 10,
        canvasHeight = 265;
        for (var i = 0; i < canvases.length; i++) {
            context.push(canvases[i].getContext('2d'));
        }
    }

    function newBall(n) {
    console.log('new ball', n);
    var last = balls[n][balls[n].length - 1],
    ball = {x: ballRadius, y: ballRadius, yStop: canvasHeight - ballRadius};
    if (last) {
      if (last.x < boxWidth - ballRadius * 4) {
        ball.x = last.x + ballRadius * 2;
        ball.yStop = last.yStop;
      } 
      else {
        ball.yStop = last.yStop - ballRadius * 2;
      }
    }
    balls[n].push(ball);
     if (!interval) {
      interval = setInterval(draw, 10);
    }
  }
       $scope.redirectTo = function (thankyou) {
       $window.location.href = 'http://localhost:8100/#/thankyou';
    } 
}]);   

balldrop.html

<body ng-contoller="ballCtrl">
    <ion-content class="bg-balldrop">

   <a class="button button-icon icon-top icon-right icon ion-close-circled" href="http://localhost:8100/#/thankyou"></a>

   <h3 class="h3 text-center padding">PRESS THE BUTTON AND PUT YOUR THOUGHTS IN RESPECTIVE BOX</h3>
   <div class="row row-center">
    <div class="col col-33 text-center">
        <img src="img/past.png" class="full-image" onclick="newBall(1);">
        <canvas class="cnsPast" height="420px" width="250px"></canvas>
    </div>
    <div class="col col-33 text-center">
        <img src="img/present.png" class="full-image" onclick="newBall(2);">
        <canvas class="cnsPresent" height="420px" width="250px"></canvas>
    </div>
    <div class="col col-33 text-center">
        <img src="img/future.png" class="full-image" onclick="newBall(3);">
        <canvas class="cnsFuture" height="420px" width="250px"></canvas>
    </div>
    </div>

</ion-content>
</body>  

But music doesn’t get played when balldrop.html is loaded. And balls do not drop in when clicked on buttons. How can I improve this code? Can I use soundmanager API for music like this:
soundmanager API

soundManager.url = '/path/to/swf-files/';

    soundManager.onready(function() {
        soundManager.createSound({
            id: 'mySound',
            url: '/path/to/an.mp3'
        });

        // ...and play it
        soundManager.play('mySound');
    });