Google 主页使用什么技术（吉他弦）答案

【问题标题】：What technology is used at the Google homepage (guitarstrings)Google 主页使用什么技术（吉他弦）
【发布时间】：2011-09-11 16:33:09
【问题描述】：

the Google homepage（2011 年 6 月 9 日）使用什么技术？他们为军鼓制作了类似吉他拾音器的东西。当您将鼠标移到它上面时，正在播放军鼓。

我知道它不是 flash，否则 Firefox 的插件会阻止它。

谢谢。

【问题讨论】：

它是闪光的（至少是声音）。有一个iframe，里面有一个闪光的声音播放器
@Wooble：是的，（我正在使用 Firebug），但我看到类似<canvas widht=xxx height=yyy></canvas>
googleblog.blogspot.com/2011/06/…
为什么这些 google 的东西总是在这里导致一个问题？并不是说它们特别复杂或令人惊奇或类似的东西。

标签： html web-applications

【解决方案1】：

他们使用canvas

<canvas width="474" height="175"></canvas>

和flash

闪光灯是为了声音。

这是 JavaScript：

(function() {
    var g = null,
        h;
    try {
        if (!google.doodle) google.doodle = {};
        var i, m, n, o, r, s, t, u, v, aa, w, ba, ca, da = navigator.userAgent.indexOf("MSIE") >= 0,
            ea = [[3, "#776a62", "#2063ff", 2, [[28, 23], [103, 23]]], [5, "#776a62", "#f61b33", 2, [[28, 38], [103, 38]]], [0, "#776a62", "#ffdd24", 2, [[65, 67], [318, 67]]], [2, "#776a62", "#07d238", 2, [[28, 81], [281, 81]]], [7, "#776a62", "#2063ff", 1, [[28, 96.5], [281, 96.5]]], [9, "#776a62", "#f61b33", 1, [[29, 111.5], [104, 111.5]]], [1, "#776a62", "#07d238", 2, [[358, 66], [433, 66]]], [4, "#776a62", "#2063ff", 2, [[358, 81], [433, 81]]], [6, "#776a62", "#f61b33", 2, [[330, 96], [405, 96]]], [8, "#776a62", "#ffdd24", 1, [[358, 111.5], [434, 111.5]]]],
            fa = 0,
            ga = 0,
            x = 0,
            y = 0,
            z = !0,
            A = [],
            B = g,
            C = g,
            D = function(a) {
                a && a.parentNode && a.parentNode.removeChild(a)
            },
            E = function(a, b, c) {
                if (a) {
                    if (!google.doodle.ba) google.doodle.ba = [];
                    google.doodle.ba.push(arguments);
                    var d = a,
                        e = b,
                        f = c;
                    d.addEventListener ? d.addEventListener(e, f, !1) : d.attachEvent("on" + e, f)
                }
            },
            ... // A lot more [link](http://jsfiddle.net/2R4Cg/)

他们也有一些CSS：

#hplogo:active,#hplogo:focus {
    outline:none;
}

#hplogo-g {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat 0 0;
    height:175px;
    position:relative;
    width:474px;
}

#hplogo-click {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    cursor:pointer;
    height:130px;
    left:0;
    position:absolute;
    top:0;
    width:474px;
}

#hplogo-lcd {
    height:30px;
    left:70px;
    position:absolute;
    top:129px;
    width:200px;
}

#hplogo-lcd-icon {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -580px -162px;
    cursor:pointer;
    height:0;
    position:absolute;
    width:0;
}

#hplogo-lcd-text {
    background:transparent;
    border:0 none;
    color:#666;
    cursor:text;
    font-family:VT323,arial,sans-serif;
    font-size:14px;
    left:77px;
    position:absolute;
    top:134px;
    text-decoration:none;
    width:182px;
}

#hplogo-lcd-screen {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    height:20px;
    left:52px;
    position:absolute;
    top:134px;
    width:214px;
}

#hplogo-on {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -809px -39px;
    height:37px;
    left:272px;
    position:absolute;
    top:123px;
    width:62px;
}

#hplogo-led {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    height:21px;
    left:292px;
    position:absolute;
    top:133px;
    width:21px;
}

.hplogo-str {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -530px -60px;
    height:20px;
    position:absolute;
    width:255px;
}

#hplogot {
    -webkit-box-shadow:5px 5px 10px #ddd;
    -moz-box-shadow:5px 5px 10px #ddd;
    box-shadow:5px 5px 10px #ddd;
    -webkit-transition:opacity .5s ease-out;
    -moz-transition:opacity .5s ease-out;
    -o-transition:opacity .5s ease-out;
    transition:opacity .5s ease-out;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    background-color:#ffffca;
    border:1px solid #b5b5b5;
    cursor:pointer;
    display:none;
    font:normal 9pt arial,sans-serif;
    left:128px;
    opacity:0;
    position:absolute;
    top:16px;
    white-space:nowrap;
    padding:2px 3px;
}

注意

#hplogo-click {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
}

和<div id="hplogo-click" onclick="google.doodle.go();"></div> 包含吉他的实际图像。

【讨论】：

【解决方案2】：

这是HTML5 Canvas、SVG 和 JavaScript 的组合。正如其他人所指出的，Flash 用于音频。

【讨论】：

如何添加所用技术的链接并解释您是如何发现的？
还有一些闪光。在我告诉 click-to-flash 将 Google.com 列入白名单之前，我没有听到任何声音。
该代码中的 SVG 在哪里？它只是画布和 CSS 图像

【解决方案3】：

可能是 HTML5？如果您在 Google Chrome 中检查元素，则会有一个画布元素。

【讨论】：

【解决方案4】：

http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html

“如果你好奇的话，这个涂鸦是由 JavaScript、HTML5 Canvas（在现代浏览器中用于绘制吉他弦）、CSS、Flash（用于声音）和 Google Font API 等工具组合而成的，goo .gl 和 App Engine。”

【讨论】：