【項目】H5打造可視化音樂播放器

wangjuntytl 發布于2019-08-29 12:56 / 2088人閱讀

摘要：應用核心結構介紹應用技術棧服務端前端界面音頻操作音頻數據可視化項目構建全局安裝使用模板引擎，新建項目進入項目目錄安裝依賴安裝項目變動實時監控工具啟動服務并檢查項目是否成功創建觀測默認端口詳析重要對象可理解為上下文對象，包含對象以及

應用核心結構介紹

應用技術棧

服務端：Node+Express+ejs

前端界面：HTML+CSS(CSS3)+JS

音頻操作：webAudio

音頻數據可視化：Canvas

項目構建

全局安裝express：npm install -g express-generator

使用ejs模板引擎，新建項目music：express --view=ejs music

進入項目目錄安裝依賴：cd music && npm install

安裝項目變動實時監控工具：npm install -g supervisor

啟動服務并檢查項目是否成功創建：supervisor bin/www && 觀測默認3000端口127.0.0.1:3000

詳析重要API

AudioContext對象：可理解為audio上下文對象，包含AudioNode對象以及它們的聯系的對象，一般情況下，一個document中只有一個AudioContext對象，主要用到其兩個屬性四個方法：

destination屬性：AudioDestinationNode對象，所有音頻輸出聚集地，相當于音頻的硬件，所有AudioNode都直接或間接連接到這里

currentTime屬性：AudioContext從創建開始到當前的時間（秒）

decodeAudioData(arrayBuffer,succ(buffer),err)方法：異步解碼包含在arrayBuffer中音頻數據

createBufferSource()方法：創建AudioBufferSourceNode對象

createAnalyser()方法：創建AnalyserNode對象

createGain()/createGainNode()方法：創建GainNode對象

AudioBufferSourceNode對象，表示內存中的一段音頻資源，其音頻數據存儲在AudioBuffer的buffer屬性中，其有三個屬性：

buffer屬性,AudioBuffer對象，表示要播放的音頻資源數據，子屬性：duration,表示該音頻資源的時長

loop屬性,是否循環播放，默認為false

onenload屬性,綁定音頻播放完畢調用的事件處理程序

start/noteOn(when=ac.currentTime,offset=0;duration=buffer.duration-offset),開始播放音頻

stop/noteOff(when=ac.currentTime),結束播放音頻

GainNode改變音頻音量的對象，會改變通過它的音頻數據所有的sample frame的信號強度，其屬性：

gain,是AudioParam對象，通過改變其value值，可以改變音頻信號的信號強弱，最小值為0，最大值為1，默認為1

AnalyserNode音頻分析對象，能實時的分析音頻資源的時域和頻域信息，但不對音頻流做任何處理，屬性：

fftSize：設置FFT值的大小，用于分析得到頻域，為32-2048之間2的整數次倍，默認為2048，實時得到的音頻數據域的個數為fftSize的一半

frequencyBinCount：實時得到的音頻頻域域的數據個數，為FFT值的一半

getByteFrequencyData(Uint8Array)復制音頻當前的頻域數據到Uint8Array中

GPU云服務器云服務器 h5背景音樂網絡音樂播放器安卓音樂播放器音樂播放器實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112247.html

【項目】H5打造可視化音樂播放器

摘要：應用核心結構介紹應用技術棧服務端前端界面音頻操作音頻數據可視化項目構建全局安裝使用模板引擎，新建項目進入項目目錄安裝依賴安裝項目變動實時監控工具啟動服務并檢查項目是否成功創建觀測默認端口詳析重要對象可理解為上下文對象，包含對象以及應用核心結構介紹 showImg(https://segmentfault.com/img/bVQWJ4?w=350&h=369); 應用技術棧服務端：...

lanffy 2019-08-20 18:00 評論0 收藏0
【項目】H5打造可視化音樂播放器

摘要：應用核心結構介紹應用技術棧服務端前端界面音頻操作音頻數據可視化項目構建全局安裝使用模板引擎，新建項目進入項目目錄安裝依賴安裝項目變動實時監控工具啟動服務并檢查項目是否成功創建觀測默認端口詳析重要對象可理解為上下文對象，包含對象以及應用核心結構介紹 showImg(https://segmentfault.com/img/bVQWJ4?w=350&h=369); 應用技術棧服務端：...

OnlyLing 2019-08-01 17:09 評論0 收藏0
SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0