Help with Fun project: Easter Egg jQuery DJ [closed]_问答_开发者

Help with Fun project: Easter Egg jQuery DJ [closed]

开发者 https://www.devze.com 2023-02-15 02:24 出处：网络

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

相关专题：audio jquery

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

开发者_如何学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 question

I'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>

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