看效果

您可以狠狠地点击这里：鼠标hover按钮无中生有播放声音demo

点开上面的链接，会看到一个按钮，此时点击按钮，然后再不断 hover 经过，就会有美妙悦耳的音效出现了。

而这个声音是硬件自动生成的，不是调用现成的mp3音频播放出来的。

换种说法就是：无需任何音频文件，只需要几行JS代码，我们就能让网页发出各种各样的音调。

如何实现？

使用的是Web Audio API实现的，关键代码其实并不多，就这么点：

1.  window.AudioContext = window.AudioContext || window.webkitAudioContext;
2.  var audioCtx = new AudioContext();
3.  var oscillator = audioCtx.createOscillator();
4.  var gainNode = audioCtx.createGain();
5.  oscillator.connect(gainNode);
6.  gainNode.connect(audioCtx.destination);
7.  oscillator.type = 'sine';
8.  oscillator.frequency.value = 196.00;
9.  gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
10. gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
11. oscillator.start(audioCtx.currentTime);
12. gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
13. oscillator.stop(audioCtx.currentTime + 1);

如果看不懂，没关系，访问这里 （ https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/ ），有非常详细的解释。

好，希望本文的内容可以帮到你的学习。

下是针对高级前端工程师的HTML相关面试题：

问题1: 请解释HTML5的Web Storage API及其使用场景。

• 考点: HTML5存储技术。
• 答案: HTML5的Web Storage API提供了两种存储方式：sessionStorage和localStorage。它们用于在客户端存储数据，不依赖于服务器。sessionStorage存储的数据在浏览器会话结束时会自动清除，而localStorage存储的数据除非手动清除，否则会一直存在。这常用于存储用户设置、会话信息等。
• 扩展问题: 请详细说明sessionStorage和localStorage的区别。
• 扩展问题: 请描述如何使用Web Storage API存储对象或数组。
• 扩展问题: 请举例说明在什么情况下使用Web Storage API比使用Cookies更合适。

问题2: 请描述HTML5的Web Worker API及其作用。

• 考点: HTML5多线程技术。
• 答案: HTML5的Web Worker API允许在后台线程中运行JavaScript代码，从而不会影响页面的性能。这适用于需要处理大量计算或I/O操作的任务，如图像处理、数据处理等。这有助于提高网页的性能，尤其是在处理大数据量或复杂计算时。
• 扩展问题: 请解释为什么在Web Worker中使用全局变量会导致问题。
• 扩展问题: 请描述如何在Web Worker中与主线程进行通信。
• 扩展问题: 请举例说明Web Worker API在处理大数据量时的优势。

问题3: 请解释HTML5的Web Sockets API及其与传统的AJAX通信的差异。

• 考点: HTML5网络通信技术。
• 答案: Web Sockets提供了一种全双工的通信机制，允许服务器和客户端之间进行实时通信。与传统的AJAX通信相比，Web Sockets具有更快的通信速度和更好的性能。它常用于需要实时数据交换的应用，如聊天应用、游戏等。
• 扩展问题: 请描述Web Sockets的持久连接是如何实现的。
• 扩展问题: 请解释Web Sockets API在处理长连接时的优势。
• 扩展问题: 请举例说明在什么情况下使用Web Sockets API比使用传统的AJAX更合适。

问题4: 请描述HTML5的Canvas API及其在网页中的使用场景。

• 考点: HTML5图形和动画技术。
• 答案: Canvas API允许在网页中使用JavaScript绘制图形、动画和其他视觉效果。它广泛用于游戏开发、数据可视化、图形设计等领域。例如，在创建一个动态图表时，可以使用Canvas API绘制图表元素并实现动画效果。
• 扩展问题: 请描述如何使用Canvas API绘制一个简单的图形。
• 扩展问题: 请解释如何在Canvas API中使用路径和形状。
• 扩展问题: 请举例说明Canvas API在创建游戏时的好处。

问题5: 请描述HTML5的Web Audio API及其在网页中的使用场景。

• 考点: HTML5音频处理技术。
• 答案: Web Audio API提供了强大的音频处理功能，包括音频合成、音频效果、音频混合等。它常用于音乐制作、音效设计、实时音频处理等场景。例如，在创建一个音乐播放器时，可以使用Web Audio API处理音频文件并实现音效效果。
• 扩展问题: 请解释如何在Web Audio API中处理音频文件。
• 扩展问题: 请描述如何使用Web Audio API创建音频合成效果。
• 扩展问题: 请举例说明Web Audio API在音乐制作时的优势。

问题6: 请描述HTML5的WebRTC API及其在网页中的应用。

• 考点: HTML5实时通信技术。
• 答案: WebRTC API提供了一种在网页中实现实时通信的方法，包括视频会议、语音聊天、屏幕共享等。它不需要安装额外的插件，直接在浏览器中运行。这常用于视频会议、远程协作等场景。
• 扩展问题: 请解释WebRTC如何处理网络抖动和延迟。
• 扩展问题: 请描述如何在WebRTC中实现视频会议功能。
• 扩展问题: 请举例说明WebRTC API在实时通信应用中的优势。

问题7: 请描述HTML5的地理定位API及其使用场景。

• 考点: HTML5位置感知技术。
• 答案: 地理定位API允许网页获取用户的地理位置信息。这常用于地图服务、导航应用、基于位置的服务（LBS）等场景。例如，在创建一个导航应用时，可以使用地理定位API获取用户的当前位置并显示导航路线。
• 扩展问题: 请解释如何处理地理定位API中的错误。
• 扩展问题: 请描述如何在地理定位API中使用高精度定位。
• 扩展问题: 请举例说明地理定位API在LBS应用中的优势。

问题8: 请描述HTML5的CSS3过渡和动画属性及其在网页中的使用场景。

• 考点: HTML5与CSS3的结合。
• 答案: CSS3过渡和动画属性允许网页中的元素平滑地过渡到新的状态或执行动画效果。它们常用于按钮点击效果、导航栏切换、页面加载动画等场景。例如，在创建一个动画导航栏时，可以使用CSS3过渡和动画属性为导航栏添加平滑的动画效果。
• 扩展问题: 请解释CSS3过渡和动画属性的异同。
• 扩展问题: 请描述如何使用CSS3过渡和动画属性创建复杂的动画效果。
• 扩展问题: 请举例说明CSS3过渡和动画属性在网页设计中的优势。

问题9: 请描述HTML5的WebGL API及其在网页中的应用。

• 考点: HTML5高级图形技术。
• 答案: WebGL API允许在网页中使用JavaScript直接操作底层图形硬件，以实现高性能的3D图形和动画效果。它常用于游戏开发、虚拟现实（VR）、增强现实（AR）等场景。例如，在创建一个3D游戏时，可以使用WebGL API实现3D场景和角色动画。 这些高级HTML面试题涉及HTML5的高级特性和API，要求面试者对HTML5有更深入的理解和应用能力。
• 扩展问题: 请解释如何在WebGL API中使用着色器。
• 扩展问题: 请描述如何在WebGL API中处理3D模型。
• 扩展问题: 请举例说明WebGL API在创建3D游戏时的优势。

019-10-26 08:30

2020年就快到了，留给曾经的网红--Flash的时间也就不多了。Flash这个曾经红遍大江南北，当时的装机必备软件，为何走向没落？这一次，就跟着小编来回顾一下它，最重要的就是回顾一下一些曾经的Flash动画及游戏大作，它们现在看/玩起来还一样让人激动万分，来看看你们玩过哪些。

图1 你必然用过的Flash

为网页而生 当年的Flash是那么的强大

Flash诞生于1996年，它本应用于网站制作，在当时与Dreamweaver，Fireworks并称网页制作三剑客，由于Flash的动画功能十分强大，表现力丰富，并且可以制作出互动游戏，它便渐渐的就独立出来成为了一款独立的动画制作软件，被更多的用于了制作小动画与小游戏。

（1996年12月，Macromedia收购了FutureWave软件，进一步提升了知名度，并将其作为一个免费的浏览器插件发布。由于名字太绕口，FutureSplash动画器最终被改成了Macromedia Flash 1.0。）

在Flash还没出现的时候，网页基本上是静态的，页面中唯一会动的就是GIF动态图片，而Flash则改变了这一点，使得网页动了起来。接下来，网页设计人员用Flash为网页增添了不少动态元素，包括了动画与互动设计，让网页进入的新的时代。

Flash拥有上手快、操作简单、易于学习、成本投入低等特点，使得它迅速的受到广大动画爱好者的追捧。在Flash火热时期，诞了一大批的闪客，给网友们带来了不少精彩的动画与好玩的游戏。

图2 会用它的举举手

那时候也诞生了许多小游戏网站，在这里站点中收集了不少使用Flash制作出来的小游戏，这些游戏有些还挺好玩的，甚至能比得上目前许多手机单机游戏。无聊时点开小游戏网站，找到感兴趣的小游戏就能玩上半天，还不用格外花钱的。

图3 Flash小游戏网站你访问过没？

说起朱志强可能许多人都会不认识这个人，但说起小小，那对于许多人来说可是如雷贯耳的经典Flash动画大作，小小的火柴人让朱志强使用Flash技术演绎的精彩绝伦，火柴人的打斗场面让人直呼过瘾，许多网友都是看了好几遍小小系列动画。这个我们在后边再详细介绍一下。同样的着名闪客还有许多，比如老蒋、皮三、林℃等等。

图4 小小系列

缺了它 上网可就麻烦了

在WindowsXP--Windows 7时代，正是Flash兴起与繁荣的时代，那时候上网，需要格外安装一个Flash Player，不然你在浏览网页的时候就会看到一块块的无法显示的缺失块儿，要不就是无法点击某些网页上的按键，甚至无法查看网络视频也无法听到网页里的音频。由于Flash能够实现许多当时网页制作时不能依靠单纯的代码而实现的许多功能，并且较为简单易用，所以它也得到了大量的网页制作人员的青睐。

图5 安装 Flash Player

图6 没有安装Flash Player导致网页缺失

技术被恶意滥用 漏洞层出不穷

那时候的网页大量采用Flash技术，甚至还诞生了纯Flash的网页，使得用户在浏览网页时无法脱离Flash。而正由于Flash的繁盛，也让它走向了没落。由于是装机必备，使得许多黑客们盯上了它，利用Flash漏洞来入侵用户电脑，传播病毒，再加上Flash一个一个层出不穷的漏洞让Flash官方头疼不已，而一些网页制作者也用它来实现网页广告。如此这些，使得Flash一时间变成了流氓的帮凶。这因为此，许多安全专家都不断呼吁网友们要么赶紧更新Flash Player到最新版，要么干脆卸载了Flash Player，以保安全。

还有一个问题就是，一些带有Flash的网页，由于Flash的设计问题，会导致大量的占用系统资源，乃至大量的消耗笔记本的电量。

甚至连Flash官方都玩起了Flash Player捆绑安装其它软件的猫腻操作。

图7 官方的Flash Player安装都捆绑其它软件

长江后浪推前浪 前浪死在沙滩上

到了现在，随着HTML5的成长与普及，以前只有Flash能做到的功能或效果，现在HTML5也能够实现，而HTML5更是能实现一些Flash无法实现的功能。这正是是长江后浪推前浪，前浪死在沙滩上。

随着技术的发展，而Flash却未能迎头赶上，还在吃老本，这就使得Flash到了被淘汰的时候了。在诞生之初，Flash以高效着称，为单调的网页提供了动画、视频播放、交互控件等高级功能，但是到了现在，Flash技术已经显得落后于时代，成为了拖累网页运行的问题之一，沦为了廉颇老矣的下场。

以前，让用户离不开Flash的一大因素，那就是因为当时的视频网站都是采用Flash技术来实现在线播放视频的，没有了Flash，用户就无法观看网页视频。而今时今日，主流的视频网站基本都提供了HTML5的支持，能播放的视频规格甚至比Flash更高，这使得脱离了Flash用户也能观看在线视频了，Flash已经没有那么重要了。

给了Flash致命一击的就是，在PC桌面环境中，Chrome、Firefox乃至微软IE等几大主流浏览器已经对Flash发出了最后通牒，各种常用浏览器陆续的宣布将不支持Flash，也就给Flash判了个死刑，目前也就是缓期执行而已。

图8 在浏览器中默认Flash已被屏蔽

而在移动互联网智能手机时代，Flash也未能重塑PC时代的辉煌，在iOS中完全被封杀，乔布斯坚决不让iOS支持Flash，据说是因为Flash的不开放性、耗电、以及安全性。而在安卓系统中也需要格外安装Flash支持APP，不过在安卓系统中也较少会用到Flash，安装后也会导致耗电飞快，用不上再加上不好用，使得Flash在智能手机中无法发展起来。

那些好玩的Flash游戏与好看的Flash动画

以前的宽带，虽然说是宽带，但是现在看来就是蜗牛网速，在4兆宽带下（甚至更慢），下载大型游戏就得等上半天，休闲时刻怎么办？网页小游戏来打发一下时间呗，而当时主宰网页小游戏的就是Flash小游戏。

Flash游戏的制作有简单的也有复杂的，在Macromedia Flash这个制作工具的帮助下，一个动画的制作变得简单起来，新手经过一段时间学习，就能制作出简单的动画，而深层次点的，加上复杂的代码+ActionScript，闪客高手们甚至能打造出类似于PC单机游戏那样的网络单机游戏。有些Flash大作你玩起来甚至不相信它是用Flash制作出来的。

Flash游戏因为小体积无需安装，打开网页即玩而受到很多玩家的喜爱。玩家甚至可以把它下载回本地来脱离网络畅玩。

图9 小小特警只有1.98M

好看的Flash动画不少，好玩的Flash更多，小编在这里跟着大家一起来回顾一下其中几个当年小编收集的好看的动画和好玩的小游戏，看看有没有你看过的，玩过的。当然，这些游戏只是众多好玩的Flash游戏里的冰山一角，这些游戏可是当年小编能玩上半天的。你还有啥需要推荐的Flash小游戏，请在评论区域留言哦，分享快乐！

首先出场的当然是小小系列，当年第一次看到小小作品，小编就被里边的精彩打斗场面与恰到好处的音效声所吸引，小编也因为它而学习了Flash制作。小小系列一共有8部（小编收集的只有8部），小编最喜欢的就是第三部，小小系列掺杂有游戏模式，比如小小特警，射击模式让小编玩的不亦乐乎。

图10 小小系列

图11 小小特警游戏

接下来出场的就是《小兵的故事》出自四格漫画《大话三国》的外传，通过Flash制作成了动画，讲述了一个无名小兵的故事，有欢笑、有泪水。

图12 小兵的故事

《爆笑三国》系列，让你可以捧腹大笑一场。

图13 爆笑三国

1945系列小游戏，爽爽快快的打飞机。

图14 1945

百万富翁系列小游戏，当年的问答闯关赢100W的电视节目可是很火的，同时也带火了相关的小游戏。

图15 百万富翁小游戏

保卫萝卜系列，没错，手机里曾经盛极一时的保卫萝卜系列Flash这里也有。

图16 保卫萝卜

《餐桌上的赛车》系列，在各种餐桌上用玩具车来一次赛车。

图17 餐桌上的赛车

《超级玛丽》系列，没错，超级玛丽也被搬上了Flash。

图18 超级玛丽系列

《打企鹅》系列，当年可是跟同学比赛谁打的远。

图19 打企鹅系列

《大鱼吃小鱼》系列，吃吃吃，看着小鱼慢慢的长大。

图20 大鱼吃小鱼

《特技飞行员》系列，控制着小飞机穿过一个一个小圈。

图21 特技飞行员

《是男人就。。。。。。》系列，这个系列的小游戏就是让玩家挑战一个一个高难度动作，看看谁才能拿到最高分。

图22 是男人就下100层

《蜗牛找房子》系列，智力游戏，设置各种机关帮蜗牛找到新房子。

图23 蜗牛找房子系列

《桌面防御战》系列，这是小编最早接触的塔防游戏。

图24 桌面防御战

《黄金矿工》系列，在规定时间内“挖”到足够的财富才能通关，这可是当年电脑课上的偷玩游戏之一，还有双人模式呢。

图25 黄金矿工

《舰炮射击》系列，隆隆的炮声，击沉敌舰，升级火力，挑战boss。

图26 舰炮射击

《皇家守卫军》系列，这个系列也是小编喜欢玩的塔防类游戏。

图27 皇家守卫军

《摘星》系列，洛可可团队给网友们带来了一个一个令人感动的爱情故事，这是最精彩的一个。伸手摘星,未必如愿,但不会弄脏你的手。Flash动画可以这样演绎！

图28 摘星系列

《火柴人大战电脑桌面》系列，类似于小小作品，不过把战场搬到了电脑桌面上，打斗场面同样精彩。目前这个系列貌似有了新作，不过虽然制作工具依然是Flash，但是传播的格式已经不是swf，而是视频格式了。

图29 火柴人大战电脑桌面

《Pucca》（中国娃娃）系列，爆笑登场，有点罗小黑的味道。

图30 《Pucca》（中国娃娃）

最后到了《QQ农场/开心农场》，多少人调好闹钟准时摘菜偷菜，你的农场几级了，你现在还在玩么？为了这篇文章，小编去看了看荒废了多年的QQ农场，它还在，但是没有了Flash，它还会存在么？

图31 QQ农场

其实只要你玩过一定量的Flash游戏，你会发现，许多Flash游戏被改制成了手机游戏，只是在手机中没有用Flash技术去制作了。比如下边这个游戏，是不是有点熟悉的感觉呢？还有就是有许多Flash游戏是复刻的，这就导致了版权问题。

图32 这个游戏你玩过么

总结

Flash的终结，不禁会让经历过那个时代的网友们感到唏嘘，Flash已经确定被终结，但是在国内还有相当一部分网站在使用着Flash，在主流浏览器都不支持Flash后，这些网站得赶紧升级一下了。Flash的辉煌许多网友经历过，感谢它带给我们无数精彩的动画和好玩的游戏，感谢它带来网页的变革。不说了，小编要去玩一下硬盘里的Flash小游戏了，许多Flash小游戏现在玩起来也会上瘾的。怀念啊我们的青春啊！

责编：王楠