帮助有趣的项目:复活节彩蛋 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 [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

javascript CK的未来复活节彩蛋

javascript 复活节彩蛋企鹅

我可以更改 PayPal 按钮上的事件侦听器以激活复活节彩蛋,然后稍后将其恢复为原始状态吗?

在线复活节彩蛋搜寻中揭示了Microsoft Edge浏览器的新图标

使用键盘输入序列显示隐藏/不可见的表格输入

Python一个有趣的彩蛋