帮助有趣的项目：复活节彩蛋 jQuery DJ [关闭]答案

【问题标题】：Help with Fun project: Easter Egg jQuery DJ [closed]帮助有趣的项目：复活节彩蛋 jQuery DJ [关闭]
【发布时间】：2011-03-07 13:36:29
【问题描述】：

我正在重新设计我的网站，并想做一个复活节彩蛋。在网站上，我经常使用圆圈，并希望让用户单击其中的一些，以触发循环/模式，例如节拍左右。当按下其他圆圈时，会播放一个音符。所以你实际上可以演奏一首简单的曲子，有节拍。

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

你们中的任何人都可以指导我正确的方向，或者帮助我吗？

【问题讨论】：

标签： jquery audio

【解决方案1】：

也许可以创建一个简单的 Flash 电影，它会播放由 javascript 控制的某些音符。看看SoundManager 或SoundManager 2。

【讨论】：

我真的很想在没有 Flash 的情况下做一些事情，这样它也可以在 iPad 和 iPhone 上运行。
那你应该为非 HTML5 浏览器做一个 flash 和移动浏览器的 <audio> 的组合。
谢谢。这将是我的解决方案。

【解决方案2】：

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

【讨论】：

@Kenneth 正确。您始终可以提供 Flash 后备。
对于复活节彩蛋的东西，我认为使用 HTML5 音频标签是可以的。它在 IE (caniuse.com/#search=audio

【解决方案3】：

这是另一种方法……它基于 alex 的建议。

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

在这个解决方案中，我做了以下事情：

用 CSS 在 div 中画了一个圆圈
将一个点击事件连接到那个在隐藏中播放声音的圆圈音频元素

很简单！

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

【讨论】：