看效果

您可以狠狠地點擊這里：鼠標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小游戲現在玩起來也會上癮的。懷念啊我們的青春啊！

責編：王楠