您現在的位置是:電腦技術吧?>? 組裝維修 ??>??最近新出平臺項目,新出投資項目大全??>??正文詳情

最近新出平臺項目,新出投資項目大全

亓建木2019-11-30 15:41:59 人圍觀
簡介項目拼出新速度12年前,無論布局多么復雜,擺在我們神奇的餐桌前都不是問題。十年前,Agie的網站重建為我們開啟了新的篇章。八年前,我們研究了雅虎網站,對它在IE5下的完美表現

十二年前,無論多么復雜的布局,在我們神奇的table面前,都不是問題;  十年前,阿捷的一本網站重構,為我們開啟了新的篇章;  八年前,我們研究yahoo.com,驚嘆它在IE5下都表現得如此完美;  六年前,Web標準化成了我們的基礎技能,我們開始研究網站性能優化;  四年前,我們開始研究自動化工具,自動化測試,誰沒玩過nodejs都不好意思說是頁面仔;  二年前,各種終端風起云涌,響應式、APP開發都成為了我們研究的范圍,CSS3動畫開始風靡;  如今,CSS3動畫、Canvas、SVG、甚至webGL你已經非常熟悉,你是否開始探尋,接下來,我們可以玩什么,來為我們項目帶來一絲新意?  沒錯,本文就是以HTML5 Device API為核心,對HTML5的一些新接口作了一個完整的測試,希望能讓大家有所啟發。

  目錄:  一、讓音樂隨心而動 - 音頻處理 Web audio API  二、捕捉用戶攝像頭 - 媒體流 Media Capture  三、你是逗逼? - 語音識別 Web Speech API  四、讓我盡情呵護你 - 設備電量 Battery API  五、獲取用戶位置 - 地理位置 Geolocation API  六、把用戶捧在手心 - 環境光 Ambient Light API  七、陀螺儀 Deviceorientation  八、Websocket  九、NFC  十、震動 - Vibration API  十一、網絡環境 Connection API  一、讓音樂隨心而動 - 音頻處理 Web audio API  簡介:  Audio對象提供的只是音頻文件的播放,而Web Audio則是給了開發者對音頻數據進行分析、處理的能力,比如混音、過濾。

  系統要求:  ios6 、android chrome、android firefox  實例:

  http://sy.qq.com/brucewan/device-api/web-audio.html  核心代碼:  var context = new webkitAudioContext();var source = context.createBufferSource(); // 創建一個聲音源source.buffer = buffer; // 告訴該源播放何物 createBufferSourcesource.connect(context.destination); // 將該源與硬件相連source.start(0); //播放  技術分析:  當我們加載完音頻數據后,我們將創建一個全局的AudioContext對象來對音頻進行處理,AudioContext可以創建各種不同功能類型的音頻節點AudioNode,比如

  1、源節點(source node)  我們可以使用兩種方式加載音頻數據:  1、audio標簽  var sound, audio = new Audio();  audio.addEventListener('canplay', function() {  sound = context.createMediaElementSource(audio);  sound.connect(context.destination);  });  audio.src = '/audio.mp3';  2、XMLHttpRequest  var sound, context = createAudioContext();var audioURl = '/audio.mp3'; // 音頻文件URLvar xhr = new XMLHttpRequest();  xhr.open('GET', audioURL, true);  xhr.responseType = 'arraybuffer';  xhr.onload = function() {  context.decodeAudioData(request.response, function (buffer) {  source = context.createBufferSource();  source.buffer = buffer;  source.connect(context.destination);  }  }  xhr.send();  2、分析節點(analyser node)  我們可以使用AnalyserNode來對音譜進行分析,例如:  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();var analyser = audioCtx.createAnalyser();  analyser.fftSize = 2048;var bufferLength = analyser.frequencyBinCount;var dataArray = new Uint8Array(bufferLength);  analyser.getByteTimeDomainData(dataArray);function draw() {  drawVisual = requestAnimationFrame(draw);  analyser.getByteTimeDomainData(dataArray); // 將dataArray數據以canvas方式渲染出來};  draw();  3、處理節點(gain node、panner node、wave shaper node、delay node、convolver node等)  不同的處理節點有不同的作用,比如使用BiquadFilterNode調整音色(大量濾波器)、使用ChannelSplitterNode分割左右聲道、使用GainNode調整增益值實現音樂淡入淡出等等。

  需要了解更多的音頻節點可能參考:  https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API  4、目的節點(destination node)  所有被渲染音頻流到達的最終地點  思維發散:  1、可以讓CSS3動畫跟隨背景音樂舞動,可以為我們的網頁增色不少;  2、可以嘗試制作H5酷酷的變聲應用,增加與用戶的互動;  3、甚至可以嘗試H5音樂創作。

  二、捕捉用戶攝像頭 - 媒體流 Media Capture  簡介:  通過getUserMedia捕捉用戶攝像頭獲取視頻流和通過麥克風獲取用戶聲音。

  系統要求:  android chrome、android firefox  實例:  捕獲用戶攝像頭

  http://sy.qq.com/brucewan/device-api/camera.html  捕獲用戶麥克風

  http://sy.qq.com/brucewan/device-api/microphone-usermedia.html  核心代碼:  1、攝像頭捕捉  navigator.webkitGetUserMedia ({video: true}, function(stream) {  video.src = window.URL.createObjectURL(stream);  localMediaStream = stream;  }, function(e){  })  2、從視頻流中拍照  btnCapture.addEventListener('touchend', function(){ if (localMediaStream) {  canvas.setAttribute('width', video.videoWidth);  canvas.setAttribute('height', video.videoHeight);  ctx.drawImage(video, 0, 0);  }  }, false);  3、用戶聲音錄制  navigator.getUserMedia({audio:true}, function(e) {  context = new audioContext();  audioInput = context.createMediaStreamSource(e);  volume = context.createGain();  recorder = context.createScriptProcessor(2048, 2, 2);  recorder.onaudioprocess = function(e){  recordingLength = 2048;  recorder.connect (context.destination);  }  }, function(error){});  4、保存用戶錄制的聲音  var buffer = new ArrayBuffer(44 interleaved.length * 2);var view = new DataView(buffer);  fileReader.readAsDataURL(blob); // android chrome audio不支持blob audio.src = event.target.result;  思維發散:  1、從視頻拍照自定義頭像;  2、H5視頻聊天;  3、結合canvas完成好玩的照片合成及處理;  4、結合Web Audio制作有意思變聲應用。

  三、你是逗逼? - 語音識別 Web Speech API  簡介:  1、將文本轉換成語音;  2、將語音識別為文本。

  系統要求:  ios7 ,android chrome,android firefox  測試實例:

  http://sy.qq.com/brucewan/device-api/microphone-webspeech.html  核心代碼:  1、文本轉換成語音,使用SpeechSynthesisUtterance對象;  var msg = new SpeechSynthesisUtterance();var voices = window.speechSynthesis.getVoices();  msg.volume = 1; // 0 to 1msg.text = 識別的文本內容;  msg.lang = 'en-US';  speechSynthesis.speak(msg);  2、語音轉換為文本,使用SpeechRecognition對象。

  var newRecognition = new webkitSpeechRecognition();  newRecognition.onresult = function(event){ var interim_transcript = '';  for (var i = event.resultIndex; i event.results.length; i) {  final_transcript = event.results[i][0].transcript;  }  };  測試結論:  1、Android支持不穩定;語音識別測試失敗(暫且認為是某些內置接口被墻所致)。

  思維發散:  1、當語音識別成為可能,那聲音控制將可以展示其強大的功能。

在某些場景,比如開車、網絡電視,聲音控制將大大改善用戶體驗;  2、H5游戲中最終分數播報,股票信息實時聲音提示,Web Speech都可以大放異彩。

  四、讓我盡情呵護你 - 設備電量 Battery API  簡介:  查詢用戶設備電量及是否正在充電。

  系統要求:  android firefox  測試實例:

  http://sy.qq.com/brucewan/device-api/battery.html  核心代碼:var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;var str = '';if (battery) {str = 'p你的瀏覽器支持HTML5 Battery API/p'; if(battery.charging) {str = 'p你的設備正在充電/p';} else {str = 'p你的設備未處于充電狀態/p';}str = 'p你的設備剩余' parseInt(battery.level*100) '%的電量/p';} else {str = 'p你的瀏覽器不支持HTML5 Battery API/p';}  測試結論:  1、QQ瀏覽器與UC瀏覽器支持該接口,但未正確顯示設備電池信息;  2、caniuse顯示android chrome42支持該接口,實測不支持。

  思維發散:  相對而言,我覺得這個接口有些雞肋。

  很顯然,并不合適用HTML5做電池管理方面的工作,它所提供的權限也很有限。

  我們只能嘗試做一些優化用戶體驗的工作,當用戶設備電量不足時,進入省電模式,比如停用濾鏡、攝像頭開啟、webGL、減少網絡請求等。

  五、獲取用戶位置 - 地理位置 Geolocation  簡介:  Geolocation API用于將用戶當前地理位置信息共享給信任的站點,目前主流移動設備都能夠支持。

  系統要求:  ios6 、android2.3   測試實例:

  http://sy.qq.com/brucewan/device-api/geolocation.html  核心代碼:  var domInfo = $(#info);// 獲取位置坐標if (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(showPosition,showError);  }else{  domInfo.innerHTML=抱歉,你的瀏覽器不支持地理定位!;  }// 使用騰訊地圖顯示位置function showPosition(position) {  var lat=position.coords.latitude; var lon=position.coords.longitude;  mapholder = $('#mapholder')  mapholder.style.height='250px';  mapholder.style.width = document.documentElement.clientWidth 'px'; var center = new soso.maps.LatLng(lat, lon); var map = new soso.maps.Map(mapholder,{  center: center,  zoomLevel: 13  }); var geolocation = new soso.maps.Geolocation(); var marker = null;  geolocation.position({}, function(results, status) {  console.log(results); var city = $(#info); if (status == soso.maps.GeolocationStatus.OK) {  map.setCenter(results.latLng);  domInfo.innerHTML = '你當前所在城市: ' results.name; if (marker != null) {  marker.setMap(null);  } // 設置標記  marker = new soso.maps.Marker({  map: map,  position:results.latLng  });  } else {  alert(檢索沒有結果,原因: status);  }  });  }  測試結論:  1、Geolocation API的位置信息來源包括GPS、IP地址、RFID、WIFI和藍牙的MAC地址、以及GSM/CDMS的ID等等。

規范中沒有規定使用這些設備的先后順序。

  2、初測3g環境下比wifi環境理定位更準確;  3、測試三星 GT-S6358(android2.3) geolocation存在,但顯示位置信息不可用POSITION_UNAVAILABLE。

  六、把用戶捧在手心 - 環境光 Ambient Light  簡介:  Ambient Light API定義了一些事件,這些時間可以提供源于周圍光亮程度的信息,這通常是由設備的光感應器來測量的。

設備的光感應器會提取出輝度信息。

  系統要求:  android firefox  測試實例:

  http://sy.qq.com/brucewan/device-api/ambient-light.html  核心代碼:  這段代碼實現感應用前當前環境光強度,調整網頁背景和文字顏色。

  var domInfo = $('#info');if (!('ondevicelight' in window)) {  domInfo.innerHTML = '你的設備不支持環境光Ambient Light API';  } else { var lightValue = document.getElementById('dl-value');  window.addEventListener('devicelight', function(event) {  domInfo.innerHTML = '當前環境光線強度為:' Math.round(event.value) 'lux'; var backgroundColor = 'rgba(0,0,0,' (1-event.value/100) ')';  document.body.style.backgroundColor = backgroundColor; if(event.value 50) {  document.body.style.color = '#fff'  } else {  document.body.style.color = '#000'  }  });  }  思維發散:  該接口適合的范圍很窄,卻能做出很貼心的用戶體驗。

  1、當我們根據Ambient Light強度、陀螺儀信息、當地時間判斷出用戶正躺在床上準備入睡前在體驗我們的產品,我們自然可以調整我們背景與文字顏色讓用戶感覺到舒適,我們還可以來一段安靜的音樂,甚至使用Web Speech API播報當前時間,并說一聲晚安,何其溫馨;  2、該接口也可以應用于H5游戲場景,比如日落時分,我們可以在游戲中使用安靜祥和的游戲場景;  3、當用戶在工作時間將手機放在暗處,偷偷地瞄一眼股市行情的時候,我們可以用語音大聲播報,親愛的,不用擔心,你的股票中國中車馬上就要跌停了,多美的畫面。

版權聲明:本文由 亓建木 整理編輯。

原標題:2019有什么新出的項目,出新

轉載注明出處:http://www.dn9ww09s.icu/assemble/14949.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 水晶櫻桃,水晶櫻桃簡介

    水晶櫻桃,水晶櫻桃簡介 相關圖片水晶櫻桃和黃蜜櫻桃很多朋友都討論過如何用煙花制作水晶櫻桃。本文教程將以圖片的形式解釋水晶櫻桃的制作,這將更清楚地傳達給每個學習者。以下是煙花制作水晶櫻桃的具體操作...

  • h5有什么用,h5怎么用

    h5有什么用,h5怎么用 相關圖片h5是用來做什么的最近發現好多人喜歡將 HTML5 說成 h5,甚至是代指移動端的 Web Page 或者 WebApp。雖然說起來朗朗上口,但是小編真的不建議這樣來使用。  小h5用什么框架好...

  • storage,Localstorage

    storage,Localstorage 相關圖片讀取localstorage本文主要介紹在HTML5中使用本地存儲的教程。本地存儲用于瀏覽器和系統之間交互的本地傳出。您可以參考幾天前的本地存儲,發現在舊項目中操作cookie很奇怪。咨詢local...

  • div和section,section和div區別

    div和section,section和div區別 相關圖片用section導入表格當我第一次接觸HTML5時,我對它的標簽不太適應,甚至一度有點反感。尤其是對于div、section和article的標簽,它們應該在哪里使用還不清楚。divHdiv居中...

  • 被拋棄了,被拋棄的我

    被拋棄了,被拋棄的我 相關圖片被拋棄的痛苦不斷尋找新的替代技術,H5即將被拋棄?昨天,社交達人分享了一段“當H5警報響起時,我該怎么辦?”這似乎是H5危機的警報。W公司創始人李3水先生表示,W不會正式做感...

  • 有哪些表現手法,表現手法

    有哪些表現手法,表現手法 相關圖片表現手法和描寫手法亞非:近半年來,我一直負責霹靂戰機和天天庫寶項目,主要集中在品牌建設和創意營銷方面。我嘗試過手繪的形式,這次我會和大家分享我的設計經驗。雷霆鋒T...

  • 刷屏,怎樣刷屏

    刷屏,怎樣刷屏 相關圖片朋友圈刷屏一、三情(親情、愛情、友情)壽草先生的情書掃描二維碼查看詳情!在這部H5中,壽操并沒有選擇呈現太多的互動技巧,而是用大段的文案和黑白影像悄悄地告訴你一個男人...

  • 排行榜,TOP

    排行榜,TOP 相關圖片國內汽車品牌排行榜目前市場上有大量的HTML 5頁面模板制作工具,但對于很多非專業的設計師來說,制作html5頁面是非常方便的。但我不得不承認,大部分作品在模板工具平臺上依然停留...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告你是否突然對市場上的H5麻木了,情況一樣,內容缺乏新意?你想做,但做不好。你不知道如何判斷工作的質量?我們在這個只有一年多的行業里遇到了什么困難?我們怎么對...

  • 決戰江湖各門派玩法,神武3門派玩法

    決戰江湖各門派玩法,神武3門派玩法 相關圖片神武3門派技能詳解作為近一年來最受歡迎的炸雞品種,H5經過一年的摸爬滾打(SE)體驗,不僅沒有氣喘吁吁,而且有許多新動作,在空中打出了新的高度。頂君一路追蹤,帶出兩個最酷...

熱評文章

  • 文字環繞,文字環繞方式在哪

    文字環繞,文字環繞方式在哪 相關圖片如何設置文字環繞圖片有時我們可能需要做一些循環文字包裝。事實上,這種文本實際上是一種文本包裝路徑效果,但僅僅使用attach to path函數是無法實現的。仔細看一下:路徑周圍文四...

  • 組合路徑,路徑組合的步驟

    組合路徑,路徑組合的步驟 相關圖片怎么合并路徑焰火的一個特點是直接繪制矢量路徑。除了使用矢量工具(筆、矩形等幾何圖形)直接繪制矢量路徑外,還可以適當地使用組合路徑函數,使路徑的操作更加高效、省力。...

  • 生活中還有哪些是指南針,生活中什么可以做指南針

    生活中還有哪些是指南針,生活中什么可以做指南針 相關圖片指南針在生活中的應用有哪些本文介紹了在焰火中如何畫指南針。主要包括五個部分。首先用橢圓工具設置畫布大小,然后填充顏色,最后繪制圖案。下面是如何在焰火中繪制指南針:...

  • 創建紋理是什么意思,怎么做紋理

    創建紋理是什么意思,怎么做紋理 相關圖片從文件創建立方體紋理我們將在焰火中創建一個新文件,鍵入它,并選擇一個更大的字體大小以使其更有效。因為文本是白色的,所以我們將背景顏色設置為黃色以進行區分。文本也可...

  • 邊緣行為,如何邊緣控制

    邊緣行為,如何邊緣控制 相關圖片邊緣控制什么意思呀如何在沒有特殊濾鏡的情況下制作藝術照片或相框?讓我們來介紹一下如何處理焰火圖像邊緣的具體方法,并歡迎所有感興趣的同事學習。有很多方法可以做到這一...

  • 野棋子,自走棋前期強的棋子

    野棋子,自走棋前期強的棋子 相關圖片云頂之奕棋子攻擊距離焰火有多種圖案。如果能充分突出其圖案的紋理特征,就可以很容易地畫出各種圖形的逼真效果。接下來,我們將使用木紋3的陰影繪制一個逼真的棋子。開始焰火...

  • AI里為什么做矩形圓角的點出不來,ps怎么裁出圓角矩形

    AI里為什么做矩形圓角的點出不來,ps怎么裁出圓角矩形 相關圖片id如何畫出圓角矩形相信做網站的朋友一定知道煙花是一款圖像處理軟件。雖然它不如Photoshop強大,但它可以滿足網頁設計的需要。嗯,在今天的主題中,我經常在網頁上看到圓形矩形的...

  • 漸變曲線,ai漸變曲線

    漸變曲線,ai漸變曲線 相關圖片ps怎么畫漸變的曲線這是一個非常簡單的小技巧,如何將混合漸變對象填充到閉合對象中。寫意7及以后。第一步:我想用五個色塊的漸變填充字母S。首先,當然,我會把字母S變成曲線。...

  • 探照燈效果,探照燈怎么使用

    探照燈效果,探照燈怎么使用 相關圖片強光探照燈我們經常可以看到一些教程文章使用flash來做文本蒙版效果,也可以用焰火來做,還可以生成GIF格式的小動畫。接下來,讓我一步一步地指導你使用焰火來制作文本探照燈探照...

  • 倒影水波,會動的水波倒影

    倒影水波,會動的水波倒影 相關圖片倒影怎么做雖然煙花爆竹的過濾器不多,但各種靈活的灌裝方法仍能使圖像達到我們所需要的各種效果。讓我們使用一個模式來添加水波反射到圖片中。啟動焰火后,直接導入準備好的...

關注微信

变脸官网查询