Help with Fun project: Easter Egg jQuery DJ [closed]
开发者_如何学C
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this questionI'm working on a redesign of my website, and would like to make a Easter Egg. On the site, I use circles a lot, and would like to let the user click on some of them, to trigger a loop/pattern like a beat or so. When pressing other circles a note is played. So you could actually play a simple tune, with a beat.
I've searched the web for similar solutions, but I can't seem to find any.
Can any of you guide me in the right direction, or help me?
It might be possible to create a simple flash movie, that will play certain notes controlled by javascript. Have a look at SoundManager or SoundManager 2.
You can embed some hidden audio elements and play() them via JavaScript.
Here is another approach... that builds on alex's suggestion.
I created a simple implementation with angular (you really should use this instead of jquery :) ...really!) that can be seen here:
In this solution, I did the following:
- drew a circle in a div with CSS
- wired up a click event to that circle that played a sound in a hidden audio element
Pretty simple!
http://jsfiddle.net/joshpierro/tw5cg2es/4/
html
<Body ng-app="circles">
<div ng-controller="circleController">
<h3>{{name}}</h3>
click the circle to play the sound
<br><br>
<div class="circle" id="circle" ng-click="playSound()">
</div>
<audio controls id="sound" class="player">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
</div>
</body>
js
var app = angular.module('circles',[]);
app.controller('circleController', ['$scope', function($scope) {
$scope.name = 'Circle App';
$scope.playSound = function(){
document.getElementById('sound').play();
}
}]);
css
.circle{
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
加载中,请稍侯......
精彩评论