帮助有趣的项目:复活节彩蛋 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 按钮上的事件侦听器以激活复活节彩蛋,然后稍后将其恢复为原始状态吗?