一、如何根據(jù)音量大小制作會(huì)跳動(dòng)的音波特效
1九串、使用AudioContext接口妓局， new這個(gè)對(duì)象創(chuàng)建上下文
AudioContext接口表示由鏈接在一起的音頻模塊構(gòu)建的音頻處理圖财忽，每個(gè)模塊由一個(gè)AudioNode表示。音頻上下文控制它包含的節(jié)點(diǎn)的創(chuàng)建和音頻處理或解碼的執(zhí)行铛只。在做任何其他操作之前埠胖，您需要?jiǎng)?chuàng)建一個(gè)AudioContext對(duì)象，因?yàn)樗惺虑槎际窃谏舷挛闹邪l(fā)生的淳玩。建議創(chuàng)建一個(gè)AudioContext對(duì)象并復(fù)用它直撤，而不是每次初始化一個(gè)新的AudioContext對(duì)象，并且可以對(duì)多個(gè)不同的音頻源和管道同時(shí)使用一個(gè)AudioContext對(duì)象蜕着。
2谋竖、audioContext.createMediaElementSource(elem)從該元素獲取源并將其通過管道傳遞到我們創(chuàng)建的上下文中
3、 audioContext.createAnalyser()創(chuàng)建一個(gè)Analyser節(jié)點(diǎn),獲取音頻時(shí)間和頻率數(shù)據(jù),來實(shí)現(xiàn)可視化
4承匣、 AnalyserNode.fftsize,這是一個(gè)無符號(hào)長(zhǎng)整型的數(shù),默認(rèn)值為2048,表示樣本的窗口大小,用來獲取頻域數(shù)據(jù)
二蓖乘、如何制作上傳文件并可以在本地預(yù)覽
文件上傳需要使用<input type=”file”/>，如下：
<input type="file" name="upload" mutipart accept="image/*">
<!--
** 可用屬性 **
type: file（必填）韧骗，必須為file
multipart: 指示是否可以多選
accept : 指示文件類型嘉抒，指示可選擇的文件，使用逗號(hào)(,)分隔
可能的值為：
* 后綴袍暴，如.jpg,.png
* 一個(gè)有效的MIME type
* audio/* 音樂文件
* video/* 視頻文件
* image/* 圖片文件
-->
原理
通過input的 type = file屬性和window的內(nèi)置FileReader對(duì)象些侍，利用FileReader對(duì)象的readAsDataURL方法，把圖片數(shù)據(jù)轉(zhuǎn)成base64字符串?dāng)?shù)據(jù)政模，然后把這個(gè)base64字符串?dāng)?shù)據(jù)賦值給一個(gè)圖片標(biāo)簽的src岗宣。
偽代碼
//input標(biāo)簽，獲取本地圖片
<input type="file" onchange="uploadImg(this)" accept="image/*"/>
//預(yù)覽圖片標(biāo)簽
<img id="viewImg"/>
function uploadImg(fileDom) {
//取到file文件的本地路徑淋样，就是你電腦上的存儲(chǔ)路徑
console.log(fileDom.value);
// 獲取圖片數(shù)據(jù)對(duì)象
var file = fileDom.files[0];
// 獲取圖片名字
console.log(file.name);
// 獲取圖片文件大小,單位為byte
console.log(file.size);
var reader = new FileReader();
reader.readAsDataURL(file);
//確保文件成功獲取耗式，base64數(shù)據(jù)量比較大
reader.onload = function (event) {
var e = event || window.event
var img = document.getElementById("viewImg");
img.src = e.target.result;
//或者 img.src = this.result; 因?yàn)閑.target == this
}
}
知識(shí)延伸
FileReader除了readAsDataURL方法之外，還有另外兩個(gè)比較重要的方法趁猴，分別為readAsBinaryString 將選擇的文件讀取成二進(jìn)制和readAsText將選擇的文件讀取成文本格式 刊咳；
三、跨域
同源策略
一個(gè)域下的 js 腳本在未經(jīng)允許的情況下儡司，不能夠訪問另一個(gè)域的內(nèi)容芦缰。這里的同源的指的是兩個(gè)域的協(xié)議、域名枫慷、端口號(hào)必須相同，否則不屬于同一個(gè)域。
同源政策主要限制了三個(gè)方面：
- 第一個(gè)是當(dāng)前域下的 js 腳本不能夠訪問其他域下的 cookie或听、localStorage 和 indexDB探孝。
- 第二個(gè)是當(dāng)前域下的 js 腳本不能夠操作訪問操作其他域下的 DOM。
- 第三個(gè)是當(dāng)前域下 ajax 無法發(fā)送跨域請(qǐng)求誉裆。
同源政策的目的主要是為了保證用戶的信息安全顿颅，對(duì)于一般的 img、或者
script 腳本請(qǐng)求都不會(huì)有跨域的限制足丢，因?yàn)檫@些操作都不會(huì)通過響應(yīng)結(jié)果來進(jìn)行可能出現(xiàn)安全問題的操作粱腻。
解決跨域的方法
通過 jsonp 跨域
使用 jsonp 來實(shí)現(xiàn)跨域請(qǐng)求，它的主要原理是通過動(dòng)態(tài)構(gòu)建 script 標(biāo)簽來實(shí)現(xiàn)跨域請(qǐng)求斩跌，因?yàn)闉g覽器對(duì) script 標(biāo)簽的引入沒有跨域的訪問限制 绍些。通過在請(qǐng)求的 url 后指定一個(gè)回調(diào)函數(shù)，然后服務(wù)器在返回?cái)?shù)據(jù)的時(shí)候耀鸦，構(gòu)建一個(gè) json 數(shù)據(jù)的包裝柬批，這個(gè)包裝就是回調(diào)函數(shù)，然后返回給前端袖订，前端接收到數(shù)據(jù)后氮帐，因?yàn)檎?qǐng)求的是腳本文件，所以會(huì)直接執(zhí)行洛姑，這樣我們先前定義好的回調(diào)函數(shù)就可以被調(diào)用上沐，從而實(shí)現(xiàn)了跨域請(qǐng)求的處理。這種方式只能用于 get 請(qǐng)求楞艾。跨域資源共享（CORS)
Access-Control-Allow-origin: 允許請(qǐng)求的方法/*(辦事多源参咙，但是不能攜帶cookie)
Access-Control-Allow-Methods:允許的方法，多個(gè)方法用逗號(hào)分開
Access-Control-Allow-Headers：允許的頭信息产徊，多個(gè)方法用逗號(hào)分開
Access-Control-Allow-Credentials:true（跨資源請(qǐng)求發(fā)送的憑據(jù)cookie等）Proxy代理
nginx 代理跨域
postMessage 跨域
h5 中新增的一個(gè) api昂勒。通過它我們可以實(shí)現(xiàn)多窗口間的信息傳遞，通過獲取到指定窗口的引用舟铜，然后調(diào)用 postMessage 來發(fā)送信息戈盈，在窗口中我們通過對(duì) message 信息的監(jiān)聽來接收信息，以此來實(shí)現(xiàn)不同源間的信息交換谆刨。WebSocket 協(xié)議跨域
使用 websocket 協(xié)議塘娶，這個(gè)協(xié)議沒有同源限制。document.domain + iframe 跨域
只能實(shí)現(xiàn)同一個(gè)主域痊夭，不同子域之間的操作
如果是想要解決不同跨域窗口間的通信問題刁岸，比如說一個(gè)頁(yè)面想要和頁(yè)面的中的不同源的 iframe 進(jìn)行通信的問題，我們可以使用 location.hash 或者 window.name 或者 postMessage 來解決她我。
window.name + iframe 跨域
主要是基于同一個(gè)窗口中設(shè)置了 window.name 后不同源的頁(yè)面也可以訪問虹曙，所以不同源的子頁(yè)面可以首先在 window.name 中寫入數(shù)據(jù)迫横，然后跳轉(zhuǎn)到一個(gè)和父級(jí)同源的頁(yè)面。這個(gè)時(shí)候級(jí)頁(yè)面就可以訪問同源的子頁(yè)面中 window.name 中的數(shù)據(jù)了酝碳，這種方式的好處是可以傳輸?shù)臄?shù)據(jù)量大矾踱。location.hash + iframe
我們可以在主頁(yè)面動(dòng)態(tài)的修改 iframe 窗口的 hash 值，然后在 iframe 窗口里實(shí)現(xiàn)監(jiān)聽函數(shù)來實(shí)現(xiàn)這樣一個(gè)單向的通信疏哗。因?yàn)樵?iframe 是沒有辦法訪問到不同源的父級(jí)窗口的呛讲，所以我們不能直接修改父級(jí)窗口的 hash 值來實(shí)現(xiàn)通信，我們可以在 iframe 中再加入一個(gè) iframe 返奉，這個(gè) iframe 的內(nèi)容是和父級(jí)頁(yè)面同源的贝搁，所以我們可以 window.parent.parent 來修改最頂級(jí)頁(yè)面的 src，以此來實(shí)現(xiàn)雙向通信芽偏。
缺點(diǎn): 傳入的數(shù)據(jù)值有限
四雷逆、[ ] == [ ] 和 { } =={ }輸出值？null == null哮针？
false false true
堆关面、棧
棧(stack)：先進(jìn)后出；自動(dòng)分配內(nèi)存空間十厢，由系統(tǒng)自動(dòng)釋放等太；
堆(heap)：隊(duì)列優(yōu)先，先進(jìn)先出蛮放；動(dòng)態(tài)分配內(nèi)存缩抡，大小不定也不會(huì)自動(dòng)釋放；存放在二級(jí)緩存中包颁，生命周期由虛擬機(jī)的垃圾回收算法來決定瞻想；一般由程序員分配釋放，若程序員不釋放娩嚼，程序結(jié)束時(shí)可能由操作系統(tǒng)回收蘑险。
js中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
基本類型：存放在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段，數(shù)據(jù)大小確定岳悟，內(nèi)存空間大小可以分配佃迄。
Undefined / Null / Boolean / Number / String，它們是直接按值存放的贵少，可以直接訪問呵俏。
引用類型：存放在堆內(nèi)存中的對(duì)象；每個(gè)空間大小不一樣滔灶，根據(jù)情況進(jìn)行特定的分配普碎。
當(dāng)我們需要訪問引用數(shù)據(jù)類型 (對(duì)象 / 數(shù)組 / 函數(shù)) 的值時(shí)，首先從棧中獲得該對(duì)象的地址指針录平，然后再?gòu)亩褍?nèi)存中取得所需的數(shù)據(jù)麻车。
所以缀皱，現(xiàn)在就可以解釋 var a = function(){}; var b = function(){}; a==b 為false,null == nul為true
變量a實(shí)際保存的是指向堆內(nèi)存中對(duì)象的一個(gè)指針，而b保存的是指向堆內(nèi)存中另一個(gè)對(duì)象的一個(gè)指針动猬；雖然這兩個(gè)對(duì)象的值是一樣的唆鸡，但它們是獨(dú)立的2個(gè)對(duì)象，占了2份內(nèi)存空間枣察；所以 a==b 為 false。
如果 var a = {}; var b = a; 這時(shí)變量b復(fù)制了變量a保存的指針燃逻，它們都指向堆內(nèi)存中同一個(gè)對(duì)象序目；所以 a==b 為 true。
五伯襟、react的優(yōu)點(diǎn)
優(yōu)點(diǎn)
1猿涨、React速度很快：它并不直接對(duì)DOM進(jìn)行操作，引入了一個(gè)叫做虛擬DOM的概念姆怪，安插在javascript邏輯和實(shí)際的DOM之間叛赚，性能好。
2稽揭、跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題俺附，它為我們提供了標(biāo)準(zhǔn)化的API，甚至在IE8中都是沒問題的溪掀。
3事镣、一切都是component：代碼更加模塊化，重用代碼更容易揪胃，可維護(hù)性高璃哟。
4、單向數(shù)據(jù)流：Flux是一個(gè)用于在JavaScript應(yīng)用中創(chuàng)建單向數(shù)據(jù)層的架構(gòu)喊递，它隨著React視圖庫(kù)的開發(fā)而被Facebook概念化随闪。
5、同構(gòu)骚勘、純粹的javascript：因?yàn)樗阉饕娴呐老x程序依賴的是服務(wù)端響應(yīng)而不是JavaScript的執(zhí)行铐伴，預(yù)渲染你的應(yīng)用有助于搜索引擎優(yōu)化。
6调鲸、兼容性好：比如使用RequireJS來加載和打包盛杰，而Browserify和Webpack適用于構(gòu)建大型應(yīng)用。它們使得那些艱難的任務(wù)不再讓人望而生畏藐石。
缺點(diǎn)
1即供、React本身只是一個(gè)V而已，并不是一個(gè)完整的框架于微，所以如果是大型項(xiàng)目想要一套完整的框架的話逗嫡，基本都需要加上ReactRouter和Flux才能寫大型應(yīng)用青自。
六、制作滾動(dòng)條驱证？如果用原生的話如何實(shí)現(xiàn)延窜？
audio的屬性以及百分比實(shí)現(xiàn)
currentTime-
duration持續(xù)時(shí)間 -
audio.onloadedmetadata加載完元數(shù)據(jù)觸發(fā)事件
拖動(dòng)進(jìn)度條的時(shí)候有哪些實(shí)現(xiàn)方式？ 區(qū)別有哪些抹锄？
-
left和translateX可以拖動(dòng)- 從布局看逆瑞，
left屬性基于父元素的大小。transform屬性基于目標(biāo)元素的大小伙单。 - 從屬范圍看获高，
left常用于position，屬于css2吻育，而translate屬于transform是css3的 - 從實(shí)現(xiàn)動(dòng)畫來看念秧，兩個(gè)都能實(shí)現(xiàn)位移動(dòng)畫，但是對(duì)于位移較為復(fù)雜的情況下布疼，使用
transform比left要好點(diǎn) - 從渲染方式來看摊趾，
position設(shè)置的是DOM的樣式，性能消耗大
- 從布局看逆瑞，
七游两、強(qiáng)制類型轉(zhuǎn)換
- boolean
- string
- number
- parseInt()
- parseFloat()
