六 09

Google首页电吉他Doodle源代码

分类：网络开发 作者：朱俊 发表评论

为了纪念电吉他之父莱斯·保罗（Les Paul，1915年6月9日－2009年8月13日）诞辰96周年，Google Doodle又出神作，首页的Logo被设计成一个电吉他形，并且鼠标滑过会弹出美妙的音乐，当你按下键盘图标时，还可以直接用键盘弹奏这个“电吉他”。

弹了几下，发现自己很有音乐天赋呢，于是决定保存下来，永久收藏。

下面是我从Google首页上抠下来的电吉他源代码，去掉了无关代码，仅供喜欢这个Doodle的朋友收藏，Google保留所有权利。

Google 电吉他 在线演示：

Google 6月10日再度更新，在www.google.com推出了带录音回放功能电吉他，按下原来的键盘图标就可以，弹完以后再按一次，点播放键。

带录音回放功能的 Google 电吉他 在线演示：

录音以后会出现类似 “http://www.google.com/webhp?tune=EAwiYAgkBETAQmAgJAA*” 这样的直接播放URL，把“http://www.google.com/webhp” 替换成你自己的电吉他URL，同样可以自动播放。

Google 电吉他 源代码打包下载：

Google电吉他源代码
上面压缩包中已经包含了新的带录音回放功能的电吉他（recordable-guitar.htm）和老的电吉他（google-guitar.htm）。

只要使用iframe 引用 “google-guitar.htm” 或者 “recordable-guitar.htm” ，就可以把整个电吉他效果加到你的独立博客或网站中去了。
如，在你的博客中添加如下代码：
<iframe src="/uploads/guitar/google-guitar.htm" height="340px" width="660px" style="overflow:hidden" frameborder="0" ></iframe> BSP会过滤大部分HTML代码，所以此方法主要适用于独立博客。

Google 电吉他 不发声的解决方案：

当然你也可以在本地直接打开 google-guitar.htm 或 recordable-guitar.htm 来弹奏吉他，不过会由于Flash安全设置而无法发声，解决方法：

  1. 上传全部六个文件到服务器，然后用网址的形式打开，可以正常发声，通过IE/FF/Chrome测试。
  2. http://www.macromedia.com/support/documentation/cn/flashplayer/help/settings_manager04.html
    打开全局安全设置面板，在这个页面上会加载本地的Flash设置，选择“编辑多个位置–添加位置”，将guitar11.swf所在文件夹加入到信任路径里，就可以本地播放了。（感谢网友Top Fun留言）
  3. 在本地用浏览器打开guitar11.swf，右键–全局设置–高级–受信任位置设置，找到并添加guitar11.swf即可。（感谢网友罗汉果提供）

Google 电吉他 谱子：

网友们（找不到最原始出处，抱歉）提供了好多谱子呢，这里挑几首简单的，先按下键盘图标，然后用键盘弹，记得关闭输入法。

两只老虎 （我的最爱^_*）
TYUT TYUT UIO UIO OPOIUT OPOIUT UWT UWT
沧海一声笑
POUYT UYTEW WEWETYUOP PPOUYTY
隐形的翅膀
358787 6568321 11186532122 358787 6568321 1118653211
天空之城（优美）
6787807 365685 254573 874477 6787807 365685 34878908 876756 1232352 5878007 678789855 43213 376321 21253 376321 21276
标签：
除非注明，本博客文章均系原创，转载请以链接形式标明出处地址。

Google首页电吉他Doodle源代码 共有203条评论

订阅此文章的评论
  1. 2011年06月13日于10:11 下午
    hl
    回复

    那个抠了半天没弄下来,今天瞎逛找到了,多谢博主….

  2. 2011年06月13日于2:16 下午
    fly's sky
    回复

    google这帮人真太有才了,关键不是技术,而是这个点子,能想到的,真是绝啊..

  3. 2011年06月13日于2:12 下午
    为我
    回复

    谷歌主页的电吉他弄的qq空间里啊？？？

    • 2011年06月13日于2:14 下午
      为我
      回复

      谷歌主页的电吉他怎么弄的qq空间里啊

      • 2011年06月13日于2:30 下午
        朱俊
        回复

        QQ 空间估计不行，不支持iframe

  4. 2011年06月13日于12:05 下午
    nikedLee
    回复

    真是没得说，竖起大拇指了

  5. 2011年06月12日于5:16 下午
    小鼠
    回复

    请教一下有关源代码的问题，第二个函数第一个变量e={}我把它删掉后，吉他的弦就没有了。是怎么回事！

    • 2011年06月12日于8:08 下午
      朱俊
      回复

      源代码我没有看懂哦。

  6. 2011年06月12日于8:22 上午
    rollom
    回复

    我下载你的代码使用，奇怪的是竟然有弹出窗口，而且好几个。

    • 2011年06月12日于8:08 下午
      朱俊
      回复

      什么弹出窗口呢？应该没有的啊

  7. 2011年06月11日于8:18 下午
    Javey
    回复

    Google Doudle电吉他真的很不错，我也从你这里转到我的博客了，呵呵 :smile:
    另外加了你的链接，也希望互换下吧。http://www.javey.org 寻找互联网

    • 2011年06月12日于8:11 下午
      朱俊
      回复

      加了~~

  8. 2011年06月11日于7:56 下午
    阳光
    回复

    早2天在google上看到这个logo就觉得很有意思，在这里找到源码，很高兴，感谢楼主的工作，转了。

  9. 2011年06月11日于12:24 下午
    yetone
    回复

    太牛了，崇拜 :grin:

  10. 2011年06月11日于11:15 上午
    Ansen
    回复

    :razz:
    博主，我转载了 放上了地址 谢谢了

  11. 2011年06月11日于11:01 上午
    浩子
    回复

    哈哈
    开始找的都不能录音啥的
    囧

    • 2011年06月11日于1:38 下午
      朱俊
      回复

      呵呵，头像很囧啊

  12. 2011年06月10日于10:21 下午
    xiafeng
    回复

    嗯，谢谢！不过可以请教一下你是怎么抠源代码下来的吗？我原本也想把源代码保存留着玩，可是不会抠。 :smile:

    • 2011年06月10日于10:38 下午
      朱俊
      回复

      就是看google首页的源代码，把需要的东西（JS，FLASH，PNG）找出来。

  13. 2011年06月10日于10:06 下午
    夜静然
    回复

    太好了，谢谢分享，我打算也放到我的博客上去，太喜欢google这个logo了

    • 2011年06月10日于10:51 下午
      朱俊
      回复

      回踩了 :)

      • 2011年06月10日于11:31 下午
        夜静然
        回复

        嘿嘿，看到你的留言了，谢谢你的源码，嘎嘎 :oops:
        可否做个友链呢？你的友链我已经添加，请看：yejingran.com
        如果愿意添加，锚文字请用我的昵称：夜静然
        :smile:

        • 2011年06月11日于2:29 下午
          朱俊
          回复

          加了 :smile:

          • 2011年06月11日于7:58 下午
            夜静然
            回复

            嘿嘿 :razz: 谢谢技术牛人！

  14. 2011年06月10日于7:22 下午
    yeyanbo
    回复

    受教，不出声音原来是flash安全问题，我还以为代码没下全呢

  15. 2011年06月10日于6:09 下午
    hhh
    回复

    firefox5beta5无法打开recordable-guitar.htm
    firebug提示：
    j.h5h = ca && a.h5h;
    a没有定义

    • 2011年06月10日于6:24 下午
      朱俊
      回复

      稍微改了一下，你再试试，我没有FF 5.0，在3.0下面测试通过。

      • 2011年06月10日于6:38 下午
        hhh
        回复

        还是不行，这篇文章中的和源码的都不行，琴弦出不来。。。 :roll:

        • 2011年06月10日于6:46 下午
          朱俊
          回复

          呵呵，看来版本太高也不行啊，直接打开www.google.com，正常吗？

          • 2011年06月10日于6:51 下午
            hhh
            回复

            直接打开是可以的

            • 2011年06月10日于6:59 下午
              小白

              我的浏览器版本是10.0.648.204，也是同样的问题。

              而且带键盘那个版本的刚刚很奇怪，下午的时候，不管是下载的源代码还是你网页上的，都可以用。然后刚才突然两个都没有弦了。我本来以为是网速的原因，可是也不对啊，本地下载的代码怎么也不行呢？但是过了一会又好了。。。
              现在仍然是可录制和回放的版本不能用

            • 2011年06月10日于7:08 下午
              朱俊

              没有琴弦貌似是缓存问题，直接打开 http://www.zhujun.org/wp-content/uploads/guitar/recordable-guitar.htm 刷新一下，应该就出来了。

            • 2011年06月10日于7:10 下午
              hhh

              一样出不来，firebug提示：
              a is undefined
              [在此错误处中断] function $b(a){j.init=!1;j.h5h=ca&&a.h…:blank”;document.body.appendChild(d);
              record…itar.js (第 384 行

            • 2011年06月10日于7:12 下午
              朱俊

              这个我没办法了，Google的代码打乱了的，完全看不懂哪里不对了。。。
              这个让它继续执行不行吗？

            • 2011年06月10日于7:14 下午
              hhh

              打乱倒是不拍。
              http://www.bm8.com.cn/jsConfusion/反混淆一下就好了。
              不过有1w多行，一样要头疼。呵呵！

            • 2011年06月10日于7:18 下午
              朱俊

              恩，而且变量名都变成a、b、c了。
              a没定义就把js中 “&&a.h5h”去掉试试。
              很多js都会有问题，但应该不影响执行啊,firebugs有没有提示什么请求是404的？

            • 2011年06月10日于7:34 下午
              小白

              哎。。。不懂js的飘过。。。
              什么打乱啊反混淆啊。。。
              我试着用chrome的开发者工具看了一下，一团乱啊，而且好像flash文件还是要根据network面板里，guitar.swf给出的链接，自己另外下载的对吧？

            • 2011年06月10日于7:58 下午
              朱俊

              guitar11.swf 已经包含在下载包里了啊。

            • 2011年06月10日于8:08 下午
              hhh

              a没定义就把js中 “&&a.h5h”去掉试试。/加了个条件判断了下，ff可以打开了。
              但是recordable-guitar.htm384行：data=\”/logos/swf/guitar11.swf\”路径不对，没有声音。改了终于可以了！

            • 2011年06月10日于8:10 下午
              朱俊

              恩，这个路径是我疏忽了，我已经改掉了，所以说刷新应该就出现琴弦了，难道你们那边还是这样的路径吗？

            • 2011年06月10日于8:13 下午
              hhh

              现在可以了，a最好加个条件判断下，不然ff到这就卡住了

            • 2011年06月10日于8:29 下午
              朱俊

              恩，改了一下js文件，现在可以用FF直接打开了吗？

            • 2011年06月10日于8:32 下午
              hhh

              重新下了源码，js好像没改过，还是下午2点的那一版本，htm改了

            • 2011年06月10日于8:44 下午
              朱俊

              JS改了，但没放入压缩包，FF直接打开 http://www.zhujun.org/wp-content/uploads/guitar/recordable-guitar.htm 没问题了，我就放入压缩包。

            • 2011年06月10日于8:58 下午
              hhh

              恩，现在可以了

            • 2011年06月10日于9:07 下午
              朱俊

              恩，把更新过的js文件也放到压缩包里了，最怕浏览器兼容问题了，一台电脑上又不想装那么多，谢谢大家帮忙调试啊。

            • 2011年06月11日于11:57 下午
              sumya

              应该可以格式化一下js代码

  16. 2011年06月10日于5:54 下午
    l1212s
    回复

    兄弟, 再强化一下, 让它自己可以演奏.

  17. 2011年06月10日于5:20 下午
    罗汉果
    回复

    本地打开一个flash，右击全局设置就可以了

    • 2011年06月10日于5:37 下午
      朱俊
      回复

      这个办法更简单，谢谢分享。

  18. 2011年06月10日于4:50 下午
    icestudio
    回复

    带录音回放功能版 在 Google Chrome 12.0版下无法播放

    • 2011年06月10日于5:07 下午
      朱俊
      回复

      http://www.google.com 上的可以用Chrome 12.0 播放吗？
      我是5.0的 :oops: ，一切正常。

  19. 2011年06月10日于4:30 下午
    zz
    回复

    带录音回放功能的 Google 电吉他，无法播放。

    • 2011年06月10日于4:33 下午
      朱俊
      回复

      我这里可以的嘛，你录音完成后要按一下那个录音按钮，就会出来播放按钮，再按一下，就可以播放了。

  20. 2011年06月10日于3:06 下午
    得奇乐
    回复

    :grin: google真给力。！

« 早前评论
较新评论 »

引用：

留下评论 （设置评论头像）