帮助有趣的项目：复活节彩蛋 jQuery DJ [关闭]
Posted
技术标签:
【中文标题】帮助有趣的项目：复活节彩蛋 jQuery DJ [关闭]【英文标题】：Help with Fun project: Easter Egg jQuery DJ [closed] 【发布时间】：2011-03-07 13:36:29 【问题描述】：我正在重新设计我的网站，并想做一个复活节彩蛋。在网站上，我经常使用圆圈，并希望让用户单击其中的一些，以触发循环/模式，例如节拍左右。当按下其他圆圈时，会播放一个音符。所以你实际上可以演奏一首简单的曲子，有节拍。
我在网上搜索了类似的解决方案，但似乎找不到任何解决方案。
你们中的任何人都可以指导我正确的方向，或者帮助我吗？
【问题讨论】：
【参考方案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>
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;
【讨论】：
以上是关于帮助有趣的项目：复活节彩蛋 jQuery DJ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
我可以更改 PayPal 按钮上的事件侦听器以激活复活节彩蛋，然后稍后将其恢复为原始状态吗？