整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
看效果
您可以狠狠地點(diǎn)擊這里：鼠標(biāo)hover按鈕無中生有播放聲音demo
點(diǎn)開上面的鏈接，會看到一個按鈕，此時點(diǎn)擊按鈕，然后再不斷 hover 經(jīng)過，就會有美妙悅耳的音效出現(xiàn)了。
而這個聲音是硬件自動生成的，不是調(diào)用現(xiàn)成的mp3音頻播放出來的。
換種說法就是：無需任何音頻文件，只需要幾行JS代碼，我們就能讓網(wǎng)頁發(fā)出各種各樣的音調(diào)。
如何實(shí)現(xiàn)？
使用的是Web Audio API實(shí)現(xiàn)的，關(guān)鍵代碼其實(shí)并不多，就這么點(diǎn)：
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);
如果看不懂，沒關(guān)系，訪問這里 （ https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/ ），有非常詳細(xì)的解釋。
好，希望本文的內(nèi)容可以幫到你的學(xué)習(xí)。
下是針對高級前端工程師的HTML相關(guān)面試題：
019-10-26 08:30
2020年就快到了，留給曾經(jīng)的網(wǎng)紅--Flash的時間也就不多了。Flash這個曾經(jīng)紅遍大江南北，當(dāng)時的裝機(jī)必備軟件，為何走向沒落？這一次，就跟著小編來回顧一下它，最重要的就是回顧一下一些曾經(jīng)的Flash動畫及游戲大作，它們現(xiàn)在看/玩起來還一樣讓人激動萬分，來看看你們玩過哪些。
圖1 你必然用過的Flash
為網(wǎng)頁而生 當(dāng)年的Flash是那么的強(qiáng)大
Flash誕生于1996年，它本應(yīng)用于網(wǎng)站制作，在當(dāng)時與Dreamweaver，F(xiàn)ireworks并稱網(wǎng)頁制作三劍客，由于Flash的動畫功能十分強(qiáng)大，表現(xiàn)力豐富，并且可以制作出互動游戲，它便漸漸的就獨(dú)立出來成為了一款獨(dú)立的動畫制作軟件，被更多的用于了制作小動畫與小游戲。
（1996年12月，Macromedia收購了FutureWave軟件，進(jìn)一步提升了知名度，并將其作為一個免費(fèi)的瀏覽器插件發(fā)布。由于名字太繞口，F(xiàn)utureSplash動畫器最終被改成了Macromedia Flash 1.0。）
在Flash還沒出現(xiàn)的時候，網(wǎng)頁基本上是靜態(tài)的，頁面中唯一會動的就是GIF動態(tài)圖片，而Flash則改變了這一點(diǎn)，使得網(wǎng)頁動了起來。接下來，網(wǎng)頁設(shè)計(jì)人員用Flash為網(wǎng)頁增添了不少動態(tài)元素，包括了動畫與互動設(shè)計(jì)，讓網(wǎng)頁進(jìn)入的新的時代。
Flash擁有上手快、操作簡單、易于學(xué)習(xí)、成本投入低等特點(diǎn)，使得它迅速的受到廣大動畫愛好者的追捧。在Flash火熱時期，誕了一大批的閃客，給網(wǎng)友們帶來了不少精彩的動畫與好玩的游戲。
圖2 會用它的舉舉手
那時候也誕生了許多小游戲網(wǎng)站，在這里站點(diǎn)中收集了不少使用Flash制作出來的小游戲，這些游戲有些還挺好玩的，甚至能比得上目前許多手機(jī)單機(jī)游戲。無聊時點(diǎn)開小游戲網(wǎng)站，找到感興趣的小游戲就能玩上半天，還不用格外花錢的。
圖3 Flash小游戲網(wǎng)站你訪問過沒？
說起朱志強(qiáng)可能許多人都會不認(rèn)識這個人，但說起小小，那對于許多人來說可是如雷貫耳的經(jīng)典Flash動畫大作，小小的火柴人讓朱志強(qiáng)使用Flash技術(shù)演繹的精彩絕倫，火柴人的打斗場面讓人直呼過癮，許多網(wǎng)友都是看了好幾遍小小系列動畫。這個我們在后邊再詳細(xì)介紹一下。同樣的著名閃客還有許多，比如老蔣、皮三、林℃等等。
圖4 小小系列
缺了它 上網(wǎng)可就麻煩了
在WindowsXP--Windows 7時代，正是Flash興起與繁榮的時代，那時候上網(wǎng)，需要格外安裝一個Flash Player，不然你在瀏覽網(wǎng)頁的時候就會看到一塊塊的無法顯示的缺失塊兒，要不就是無法點(diǎn)擊某些網(wǎng)頁上的按鍵，甚至無法查看網(wǎng)絡(luò)視頻也無法聽到網(wǎng)頁里的音頻。由于Flash能夠?qū)崿F(xiàn)許多當(dāng)時網(wǎng)頁制作時不能依靠單純的代碼而實(shí)現(xiàn)的許多功能，并且較為簡單易用，所以它也得到了大量的網(wǎng)頁制作人員的青睞。
圖5 安裝 Flash Player
圖6 沒有安裝Flash Player導(dǎo)致網(wǎng)頁缺失
技術(shù)被惡意濫用 漏洞層出不窮
那時候的網(wǎng)頁大量采用Flash技術(shù)，甚至還誕生了純Flash的網(wǎng)頁，使得用戶在瀏覽網(wǎng)頁時無法脫離Flash。而正由于Flash的繁盛，也讓它走向了沒落。由于是裝機(jī)必備，使得許多黑客們盯上了它，利用Flash漏洞來入侵用戶電腦，傳播病毒，再加上Flash一個一個層出不窮的漏洞讓Flash官方頭疼不已，而一些網(wǎng)頁制作者也用它來實(shí)現(xiàn)網(wǎng)頁廣告。如此這些，使得Flash一時間變成了流氓的幫兇。這因?yàn)榇?，許多安全專家都不斷呼吁網(wǎng)友們要么趕緊更新Flash Player到最新版，要么干脆卸載了Flash Player，以保安全。
還有一個問題就是，一些帶有Flash的網(wǎng)頁，由于Flash的設(shè)計(jì)問題，會導(dǎo)致大量的占用系統(tǒng)資源，乃至大量的消耗筆記本的電量。
甚至連Flash官方都玩起了Flash Player捆綁安裝其它軟件的貓膩操作。
圖7 官方的Flash Player安裝都捆綁其它軟件
長江后浪推前浪 前浪死在沙灘上
到了現(xiàn)在，隨著HTML5的成長與普及，以前只有Flash能做到的功能或效果，現(xiàn)在HTML5也能夠?qū)崿F(xiàn)，而HTML5更是能實(shí)現(xiàn)一些Flash無法實(shí)現(xiàn)的功能。這正是是長江后浪推前浪，前浪死在沙灘上。
隨著技術(shù)的發(fā)展，而Flash卻未能迎頭趕上，還在吃老本，這就使得Flash到了被淘汰的時候了。在誕生之初，F(xiàn)lash以高效著稱，為單調(diào)的網(wǎng)頁提供了動畫、視頻播放、交互控件等高級功能，但是到了現(xiàn)在，F(xiàn)lash技術(shù)已經(jīng)顯得落后于時代，成為了拖累網(wǎng)頁運(yùn)行的問題之一，淪為了廉頗老矣的下場。
以前，讓用戶離不開Flash的一大因素，那就是因?yàn)楫?dāng)時的視頻網(wǎng)站都是采用Flash技術(shù)來實(shí)現(xiàn)在線播放視頻的，沒有了Flash，用戶就無法觀看網(wǎng)頁視頻。而今時今日，主流的視頻網(wǎng)站基本都提供了HTML5的支持，能播放的視頻規(guī)格甚至比Flash更高，這使得脫離了Flash用戶也能觀看在線視頻了，F(xiàn)lash已經(jīng)沒有那么重要了。
給了Flash致命一擊的就是，在PC桌面環(huán)境中，Chrome、Firefox乃至微軟IE等幾大主流瀏覽器已經(jīng)對Flash發(fā)出了最后通牒，各種常用瀏覽器陸續(xù)的宣布將不支持Flash，也就給Flash判了個死刑，目前也就是緩期執(zhí)行而已。
圖8 在瀏覽器中默認(rèn)Flash已被屏蔽
而在移動互聯(lián)網(wǎng)智能手機(jī)時代，F(xiàn)lash也未能重塑PC時代的輝煌，在iOS中完全被封殺，喬布斯堅(jiān)決不讓iOS支持Flash，據(jù)說是因?yàn)镕lash的不開放性、耗電、以及安全性。而在安卓系統(tǒng)中也需要格外安裝Flash支持APP，不過在安卓系統(tǒng)中也較少會用到Flash，安裝后也會導(dǎo)致耗電飛快，用不上再加上不好用，使得Flash在智能手機(jī)中無法發(fā)展起來。
那些好玩的Flash游戲與好看的Flash動畫
以前的寬帶，雖然說是寬帶，但是現(xiàn)在看來就是蝸牛網(wǎng)速，在4兆寬帶下（甚至更慢），下載大型游戲就得等上半天，休閑時刻怎么辦？網(wǎng)頁小游戲來打發(fā)一下時間唄，而當(dāng)時主宰網(wǎng)頁小游戲的就是Flash小游戲。
Flash游戲的制作有簡單的也有復(fù)雜的，在Macromedia Flash這個制作工具的幫助下，一個動畫的制作變得簡單起來，新手經(jīng)過一段時間學(xué)習(xí)，就能制作出簡單的動畫，而深層次點(diǎn)的，加上復(fù)雜的代碼+ActionScript，閃客高手們甚至能打造出類似于PC單機(jī)游戲那樣的網(wǎng)絡(luò)單機(jī)游戲。有些Flash大作你玩起來甚至不相信它是用Flash制作出來的。
Flash游戲因?yàn)樾◇w積無需安裝，打開網(wǎng)頁即玩而受到很多玩家的喜愛。玩家甚至可以把它下載回本地來脫離網(wǎng)絡(luò)暢玩。
圖9 小小特警只有1.98M
好看的Flash動畫不少，好玩的Flash更多，小編在這里跟著大家一起來回顧一下其中幾個當(dāng)年小編收集的好看的動畫和好玩的小游戲，看看有沒有你看過的，玩過的。當(dāng)然，這些游戲只是眾多好玩的Flash游戲里的冰山一角，這些游戲可是當(dāng)年小編能玩上半天的。你還有啥需要推薦的Flash小游戲，請?jiān)谠u論區(qū)域留言哦，分享快樂！
首先出場的當(dāng)然是小小系列，當(dāng)年第一次看到小小作品，小編就被里邊的精彩打斗場面與恰到好處的音效聲所吸引，小編也因?yàn)樗鴮W(xué)習(xí)了Flash制作。小小系列一共有8部（小編收集的只有8部），小編最喜歡的就是第三部，小小系列摻雜有游戲模式，比如小小特警，射擊模式讓小編玩的不亦樂乎。
圖10 小小系列
圖11 小小特警游戲
接下來出場的就是《小兵的故事》出自四格漫畫《大話三國》的外傳，通過Flash制作成了動畫，講述了一個無名小兵的故事，有歡笑、有淚水。
圖12 小兵的故事
《爆笑三國》系列，讓你可以捧腹大笑一場。
圖13 爆笑三國
1945系列小游戲，爽爽快快的打飛機(jī)。
圖14 1945
百萬富翁系列小游戲，當(dāng)年的問答闖關(guān)贏100W的電視節(jié)目可是很火的，同時也帶火了相關(guān)的小游戲。
圖15 百萬富翁小游戲
保衛(wèi)蘿卜系列，沒錯，手機(jī)里曾經(jīng)盛極一時的保衛(wèi)蘿卜系列Flash這里也有。
圖16 保衛(wèi)蘿卜
《餐桌上的賽車》系列，在各種餐桌上用玩具車來一次賽車。
圖17 餐桌上的賽車
《超級瑪麗》系列，沒錯，超級瑪麗也被搬上了Flash。
圖18 超級瑪麗系列
《打企鵝》系列，當(dāng)年可是跟同學(xué)比賽誰打的遠(yuǎn)。
圖19 打企鵝系列
《大魚吃小魚》系列，吃吃吃，看著小魚慢慢的長大。
圖20 大魚吃小魚
《特技飛行員》系列，控制著小飛機(jī)穿過一個一個小圈。
圖21 特技飛行員
《是男人就。。。。。。》系列，這個系列的小游戲就是讓玩家挑戰(zhàn)一個一個高難度動作，看看誰才能拿到最高分。
圖22 是男人就下100層
《蝸牛找房子》系列，智力游戲，設(shè)置各種機(jī)關(guān)幫蝸牛找到新房子。
圖23 蝸牛找房子系列
《桌面防御戰(zhàn)》系列，這是小編最早接觸的塔防游戲。
圖24 桌面防御戰(zhàn)
《黃金礦工》系列，在規(guī)定時間內(nèi)“挖”到足夠的財(cái)富才能通關(guān)，這可是當(dāng)年電腦課上的偷玩游戲之一，還有雙人模式呢。
圖25 黃金礦工
《艦炮射擊》系列，隆隆的炮聲，擊沉敵艦，升級火力，挑戰(zhàn)boss。
圖26 艦炮射擊
《皇家守衛(wèi)軍》系列，這個系列也是小編喜歡玩的塔防類游戲。
圖27 皇家守衛(wèi)軍
《摘星》系列，洛可可團(tuán)隊(duì)給網(wǎng)友們帶來了一個一個令人感動的愛情故事，這是最精彩的一個。伸手摘星,未必如愿,但不會弄臟你的手。Flash動畫可以這樣演繹！
圖28 摘星系列
《火柴人大戰(zhàn)電腦桌面》系列，類似于小小作品，不過把戰(zhàn)場搬到了電腦桌面上，打斗場面同樣精彩。目前這個系列貌似有了新作，不過雖然制作工具依然是Flash，但是傳播的格式已經(jīng)不是swf，而是視頻格式了。
圖29 火柴人大戰(zhàn)電腦桌面
《Pucca》（中國娃娃）系列，爆笑登場，有點(diǎn)羅小黑的味道。
圖30 《Pucca》（中國娃娃）
最后到了《QQ農(nóng)場/開心農(nóng)場》，多少人調(diào)好鬧鐘準(zhǔn)時摘菜偷菜，你的農(nóng)場幾級了，你現(xiàn)在還在玩么？為了這篇文章，小編去看了看荒廢了多年的QQ農(nóng)場，它還在，但是沒有了Flash，它還會存在么？
圖31 QQ農(nóng)場
其實(shí)只要你玩過一定量的Flash游戲，你會發(fā)現(xiàn)，許多Flash游戲被改制成了手機(jī)游戲，只是在手機(jī)中沒有用Flash技術(shù)去制作了。比如下邊這個游戲，是不是有點(diǎn)熟悉的感覺呢？還有就是有許多Flash游戲是復(fù)刻的，這就導(dǎo)致了版權(quán)問題。
圖32 這個游戲你玩過么
總結(jié)
Flash的終結(jié)，不禁會讓經(jīng)歷過那個時代的網(wǎng)友們感到唏噓，F(xiàn)lash已經(jīng)確定被終結(jié)，但是在國內(nèi)還有相當(dāng)一部分網(wǎng)站在使用著Flash，在主流瀏覽器都不支持Flash后，這些網(wǎng)站得趕緊升級一下了。Flash的輝煌許多網(wǎng)友經(jīng)歷過，感謝它帶給我們無數(shù)精彩的動畫和好玩的游戲，感謝它帶來網(wǎng)頁的變革。不說了，小編要去玩一下硬盤里的Flash小游戲了，許多Flash小游戲現(xiàn)在玩起來也會上癮的。懷念啊我們的青春??！
責(zé)編：王楠
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
