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');
});