Question

我正在重新设计我的网站，并希望制作复活节彩蛋。在网站上，我经常使用圈子，并且想让用户点击其中的一些圈子，以触发像节拍那样的循环/模式。按其他圆圈时会播放一个音符。所以你实际上可以用一个节拍来演奏一首简单的曲调。

我在网上搜索了类似的解决方案，但我似乎无法找到任何解决方案。

你们中的任何一个人能指导我正确的方向，还是帮助我？

Answer 1

您可以通过JavaScript嵌入一些隐藏的audio元素和play()元素。

Answer 2

有可能创建一个简单的flash电影，它将播放由javascript控制的某些音符。请查看SoundManager或SoundManager 2。

Answer 3

这是另一种方法......建立在alex的建议之上。

我用angular创建了一个简单的实现（你真的应该使用它而不是jquery :) ...真的！）可以在这里看到：

在此解决方案中，我执行了以下操作：

用CSS
将点击事件连接到在隐藏中播放声音的圈子音频元素

非常简单！

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

帮助Fun项目：Easter Egg jQuery DJ

3 个答案: