首頁 > web前端 > H5教程 > 主體

HTML5音樂視覺化影片教學的資源推薦

黄舟
發布: 2017-09-01 14:37:39
原創
2482 人瀏覽過

單純的音樂播放是否過於單調,在聽音樂的同時如果也能看見音樂是否更有感。本課程將帶領你使用webAudio和canvas將你的音樂以你喜歡的形式視覺化出來,讓你的音樂動起來。

HTML5音樂視覺化影片教學的資源推薦

課程播放網址:http://www.php.cn/course/327.html

該老師講課風格:

教師講課深入淺出,條理清楚,層層剖析,環環相扣,論證嚴密,結構嚴謹,用思維的邏輯力量吸引學生的注意力,用理智控制課堂教學進程。學生透過聽教師的講授,不僅學到知識,也受到思維的訓練,還受到教師嚴謹的治學態度的熏陶和感染

本視頻中較為難點是HTML5音樂可視化了:

音樂的獲取與播放

構建應用程式的前後端

1,新媒體資料資料夾, public/media,將音訊資料放入其中
2,建立頁面CSS框架,/public/stylesheets/index.css
3,讀取頁面內容,views/index.ejs
4,後台路由控制,routes/index.js,取得音樂清單並傳回給前段

ajax請求服務端音訊資料

在javascripts下新檔案index.js,在views/index.ejs引用創建的文件

<script type="text/javascript" src="/javascripts/index.js"></script>
登入後複製

#編輯建立文件,實現點擊效果

<ul id="list">
        <% music.forEach(function(name){ %>
              <li title="<%= name %>"><%= name %></li>    #设置title属性
        <% }) %>
</ul>
登入後複製


##解碼並播放音訊

AudioContext

包含各個AudioNode對像以及它們的聯繫的對象,即audio上下文對象。一個document中只有一個AudioContext創建:var ac = new window.AudioContext();

屬性:

destination,AudioDestinationNode對象,所有的音頻輸出聚集地,相當於音頻的硬件,所有的AudioNode都直接或間接地連接到這裡。

currentTime,AudioContext從建立開始到目前的時間(秒)。

方法:

decodeAudioData(arrayBuffer,succ(buffer),err),非同步解碼包含在arrayBuffer中音訊資料

createBufferSource(),建立autioBufferSourceNode物件

createAnalyser(),建立AnalyserNode物件

createGain()/createGainNode(),建立GainNode物件

AudioBufferSourceNode

表示記憶體中的一段音訊資源,其音訊資料儲存在AudioBuffer中(其buffer屬性)

建立:var buffersource = ac.createBufferSource();

屬性:

buffer,AudioBuffer對象,表示要播放的音訊資源數據

-子屬性:duration,此音訊資源的時長(秒)

loop,是否循環播放,預設false

onended,可綁定音訊播放完畢時呼叫的時間處理程序

方法:

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

when:何時開始播放;
offset:從音訊的第幾秒開始播放;
duration:播放幾秒鐘

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

新增音量控制

GainNode

改變音訊音量的對象,改變透過它的音訊資料所有的sampleframe的訊號強度

建立:var gainNode = ac.createGain()/ac.createGainNode();

gain,AudioParam對象,透過改變其value值可以改變音訊訊號的強弱,預設的value屬性值為1,經由最小值為0,最大值為1,其value值也可以大於1,小於0

播放bug修復

#問題:播放第二首歌時,第一首歌依然在播放,主要原因是每次點擊音樂清單即呼叫load("/media/"+this.title),資料解碼並播放:

xhr.onload = function(){
    ac.decodeAudioData(xhr.response, function(buffer){
        var bufferSource = ac.createBufferSource();
        bufferSource.buffer = buffer;
        bufferSource.connect(gainNode);
        bufferSource[bufferSource.start?"start":"noteOn"](0);
    }, function(err){
                console.log(err);
    });
}
登入後複製

解決方法:

對音訊資料賦空值var source = null;,儲存上一首歌的解碼資料source = bufferSource;,判斷執行停止播放source && source[source.stop ? "stop" : "noteoff"](0);

音樂資料視覺化

AnalyserNode

音频分析对象,它能实时的分析音频资源的频域和时域信息,但不会对音频流做任何处理
创建:var analyser = ac.createAnalyser();

fftSize,设置FFT(FFT是离散傅里叶变换的快速算法,用于将一个信号变换到频域)值得大小,用于分析得到频域,为32 - 2048之间2的整数倍,默认为2048。实时得到的音频频域的数据个数为FFTSize的一半

frequencyBinCount,FFT值得一半,即实时得到的音频频域的数据个数

getByteFrequencyData(Uint8Array),复制音频当前的频域数据(数量是FrequencyBinCount)到Uint8Array(8位无符号整型类型化数组)中

创建Analyser对象:

var analyser = ac.createAnalyser();
analyser.fftSize = 512;
analyser.connect(gainNode);
登入後複製

连接到分

析对象获取数据:bufferSource.connect(analyser);

实现可视化功能函数:

function visualizer(){
    var arr = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(arr);
    console.log(arr);
}
登入後複製

调用visualizer函数:

利用canvas将音乐数据可视化(柱状图)

在views下加入id

控制高度变化:

var box = $("#box")[0];
var height, width;
var canvas = document.createElement("canvas");
box.appendChild(canvas);
 
function resize(){
    height = box.clientHeight;
    width = box.clientWidth;
    canvas.height = height;
    canvas.width = width;
}
resize();    #调用触发函数
 
window.onresize = resize;
登入後複製

利用canvas将音乐数据可视化(圆点图)

应用优化

webAudio API

webAudio核心功能封装为对象

以上是HTML5音樂視覺化影片教學的資源推薦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板