Web Audio API之手把手教你用web api處理聲音訊號:視覺化音樂demo

GabrielChenCN發表於2015-12-27
WebAPI音訊視覺化

1.Web Audio API 介紹

       Web Audio API 提供了在Web上控制音訊的一個非常有效通用的系統 ，這些通用系統通俗的講就是我們可以利用Web Audio API提供的各種方法操作各種源中的聲音，處理聲音，使聲音視覺化等。

　　要使用Web Audio API，我們還是先來簡單的瞭解一下它的工作流程：

  1. 建立音訊環境(eg. AudioContext..)
  2. 在音訊環境裡建立源 — 例如 , 振盪器, 流（eg. navigator.getUserMedia/createMediaElementSource..）
  3. 建立效果節點，例如混響、雙二階濾波器、平移、壓縮(Web Audio API 提供一些簡單的濾波器或者延時器等，可以製作一個簡單的混音工具)
  4. 為音訊選擇一個目地，例如你的系統揚聲器
  5. 連線源到效果器，以及效果器和目地（分析和視覺化eg. AnalyserNode）

       其相容性如下：

　　桌面端：

瀏覽器 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
支援版本 14 
 23 未實現 15 6

　　移動端：

 

瀏覽器

Android

Chrome

Firefox Mobile (Gecko)

Firefox OS

IE Phone

Opera Mobile

Safari Mobile

支援版本 未實現 28 
 25 1.2 未實現 未實現 6 

 

2.示例程式碼

　　"talking is cheap , show me the codes."

　　我知道各位看官並不想聽什麼時域頻域變換，什麼傅立葉變換，什麼web audio api原理，那我就廢話不多說，直接放碼過來了，先看看效果再來給大家解釋。

　　盡情複製貼上，然後拿個現代一點的瀏覽器跑一下（用IE的請點右上角紅叉，謝謝）。

      注意：audio標籤的src屬性內容請自己在本機找一個瀏覽器支援的聲音源格式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="Author" contect="GabrielChen">
	<meta name="keywords" contect="Web Audio API">
    <title>Web Audio API 學習</title>
    <script>
        var canvas;
        var ctx;
        var audioContext;
        var analyser;
        var mic;

        function init() {
            canvasOne = document.getElementById('canvasOne');
            ctx = canvasOne.getContext("2d");
            canvasTwo = document.getElementById('canvasTwo');
            ctx2 = canvasTwo.getContext("2d");
        
            
        }
      
        navigator.getMedia = ( navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);

        navigator.getMedia ( { audio: true }, function (stream) {
            audioContext = new (window.AudioContext || window.webkitAudioContext);
            
            mic = audioContext.createMediaStreamSource(stream);
           
            analyser= audioContext.createAnalyser();
           
            analyser.fftSize = 256;
            mic.connect(analyser);
            drawSpectrum();
        },function(){});

        

        function drawSpectrum() {
            var WIDTH = canvasOne.width;
            var HEIGHT= canvasOne.height;

            var array =  new Uint8Array(128);
            analyser.getByteFrequencyData(array);
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            ctx2.clearRect(0, 0, 800, 800);
            for ( var i = 0; i < (array.length); i++ ){
                var value = array[i];
                ctx.fillRect(i*5,HEIGHT-value,3,HEIGHT);
            }

          
            for ( var i = 0; i < (array.length); i++ ){
                var value = array[i];
                ctx2.beginPath();
				ctx2.arc(300,300,value,0,360,false);
				ctx2.lineWidth=5;
				ctx2.strokeStyle="rgba("+value+","+value+",0,0.2)";
				ctx2.stroke();//畫空心圓
				ctx2.closePath();
        
            }
            
            requestAnimationFrame(drawSpectrum);
        };




    </script>
    <style>
        #canvasOne {
            border: 1px solid #ddd;
        }
    </style>
</head>
<body onload="init();">
<h1>從audio源獲取聲音</h1>
<audio src="./Fatbros.ogg" controls="controls" id="audio">你的瀏覽器不支援audio標籤</audio>
<h1>audio讀取聲音</h1>
<canvas id="canvasFormAudio" width="640"></canvas>
<h1>頻域圖模仿</h1>
<canvas id="canvasOne" width="640"></canvas>
<h1>圓形聲波圖</h1>
<canvas id="canvasTwo" width="800" height="800"></canvas>

<script type="text/javascript">


        var context1;
        var source;
        var analyserfa;
        var canvasFormAudio;
        var ctxfa;

        canvasFormAudio = document.getElementById('canvasFormAudio');
        ctxfa = canvasFormAudio.getContext("2d");
        try {
       
    	 context1 = new (window.AudioContext || window.webkitAudioContext);
		} catch(e) {
    	 throw new Error('The Web Audio API is unavailable');
		}

		analyserfa=context1.createAnalyser();

		window.addEventListener('load', function(e) {
  	         var audio =document.getElementById("audio");
 		 var source = context1.createMediaElementSource(audio);
 		 source.connect(analyserfa);
  		 analyserfa.connect(context1.destination);
  	
  		 drawSpectrumfa();
  
}, false);
        function drawSpectrumfa() {
            var WIDTH = canvasFormAudio.width;
            var HEIGHT= canvasFormAudio.height;

            var array =  new Uint8Array(128);
           
            analyserfa.getByteFrequencyData(array);

            ctxfa.clearRect(0, 0, WIDTH, HEIGHT);
           
            for ( var i = 0; i < (array.length); i++ ){
                var value = array[i];
  　　　　　　　　 ctxfa.fillRect(i*5,HEIGHT-value,3,HEIGHT);
            }

         	
            requestAnimationFrame(drawSpectrumfa);
        }
</script>
</body>
</html>

　　

　　

 

3.程式碼分析

我們從body部分入手分析

<body onload="init();">
<h1>從audio源獲取聲音</h1>
<audio src="./Fatbros.ogg" controls="controls" id="audio">你的瀏覽器不支援audio標籤</audio>
<h1>audio讀取聲音</h1>
<canvas id="canvasFormAudio" width="640"></canvas>
<h1>頻域圖模仿</h1>
<canvas id="canvasOne" width="640"></canvas>
<h1>圓形聲波圖</h1>
<canvas id="canvasTwo" width="800" height="800"></canvas>

用onload屬性呼叫初始化函式init(),主要在頁面生成之後初始化一些變數，避免讀不到相關DOM。

       function init() {
            canvasOne = document.getElementById('canvasOne');
            ctx = canvasOne.getContext("2d");
            canvasTwo = document.getElementById('canvasTwo');
            ctx2 = canvasTwo.getContext("2d");
        
            
        }

第一塊canvas：從audio源獲取聲音

首先一個audio標籤，在本機選定一個src，設定controls屬性代表瀏覽器顯示播放器控制頁面，設定id為audio。

再設定一個id為"canvasFormAudio"的畫布canvas。

<audio src="./Fatbros.ogg" controls="controls" id="audio">你的瀏覽器不支援audio標籤</audio>
<h1>audio讀取聲音</h1>
<canvas id="canvasFormAudio" width="640"></canvas>

獲取聲音源以及繪圖

//直接從audio處理音訊源，宣告一些必要的變數
        var context1;
        var source;
        var analyserfa;
        var canvasFormAudio;
        var ctxfa;
//初始化畫布
        canvasFormAudio = document.getElementById('canvasFormAudio');
        ctxfa = canvasFormAudio.getContext("2d");
//建立一個音訊環境，因為瀏覽器實現不同，做了一點相容性處理
        try {
        
    	 context1 = new (window.AudioContext || window.webkitAudioContext);
		} catch(e) {
    	 throw new Error('The Web Audio API is unavailable');
		}
//建立一個分析器
		analyserfa=context1.createAnalyser();

		window.addEventListener('load', function(e) {
  	  // 從audio標籤獲取聲音源 source
  		 var audio =document.getElementById("audio");
 		 var source = context1.createMediaElementSource(audio);
 		 source.connect(analyserfa);
  		 analyserfa.connect(context1.destination);
  	  //呼叫繪圖函式
  		 drawSpectrumfa();
  
}, false);
　　　　　　//繪圖函式
        function drawSpectrumfa() {
            var WIDTH = canvasFormAudio.width;
            var HEIGHT= canvasFormAudio.height;

            var array =  new Uint8Array(128);
            //複製當前的頻率值到一個無符號陣列中
            analyserfa.getByteFrequencyData(array);

            //clearRect(矩形左上角x座標，矩形左上角y座標，清除矩形的寬，清除矩形的高)
            ctxfa.clearRect(0, 0, WIDTH, HEIGHT);
           //迴圈生成長條矩形
            for ( var i = 0; i < (array.length); i++ ){
                var value = array[i];

                //fillRect(矩形左上角x座標，矩形左上角y座標，矩形寬，矩形高)
　　　　　　　　　//這裡我們的array一共有128組資料，所以我們當時canvas設定的寬度為5*128=640
                ctxfa.fillRect(i*5,HEIGHT-value,3,HEIGHT);
            }

         	//根據瀏覽器頻率繪圖或者操作一些非css效果
            requestAnimationFrame(drawSpectrumfa);
        }

　　

第二塊：頻域圖模仿和圓形聲波圖

這兩個圖的音源都是利用瀏覽器呼叫電腦麥克風取得，所以一定要同意瀏覽器請求的麥克風許可權。

繪圖區域

<h1>頻域圖模仿</h1>
<canvas id="canvasOne" width="640"></canvas>
<h1>圓形聲波圖</h1>
<canvas id="canvasTwo" width="800" height="800"></canvas>

初始化init()函式、從麥克風獲取音源和繪圖函式

        var canvas;
        var ctx;
        var audioContext;
        var analyser;
        var mic;
//初始化兩個畫布的函式，宣告為2d繪圖
        function init() {
            canvasOne = document.getElementById('canvasOne');
            ctx = canvasOne.getContext("2d");
            canvasTwo = document.getElementById('canvasTwo');
            ctx2 = canvasTwo.getContext("2d");
        
            
        }
       //getMedia呼叫引數如下，返回一個多媒體流
　　　　//constraints可選{ video: true, audio: true },代表獲取多媒體的型別
       //var stream = navigator.getUserMedia(constraints, successCallback, errorCallback);
      
        navigator.getMedia = ( navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);

        navigator.getMedia ( { audio: true }, function (stream) {
            audioContext = new (window.AudioContext || window.webkitAudioContext);
            //返回一個多媒體流
            mic = audioContext.createMediaStreamSource(stream);
            //creates an AnalyserNode 建立一個分析節點
            analyser= audioContext.createAnalyser();
            //fftsize預設值2048，是快速傅立葉變換用於頻域分析的值，必須為2的冪，而我們得到的資料通常為其的一半，下面會說道
            analyser.fftSize = 256;
            mic.connect(analyser);
　　　　　　//呼叫繪圖函式
            drawSpectrum();
        },function(){});

        
　　　　　//圓形聲波繪圖和矩形繪圖
        function drawSpectrum() {
            var WIDTH = canvasOne.width;
            var HEIGHT= canvasOne.height;
　　　　　　　//長度為128無符號陣列用於儲存getByteFrequencyData返回的頻域資料
            var array =  new Uint8Array(128);
            analyser.getByteFrequencyData(array);
　　　　　　 //以下是根據頻率資料畫圖，主要為canvas知識，不做詳細解答
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            ctx2.clearRect(0, 0, 800, 800);
            for ( var i = 0; i < (array.length); i++ ){
                var value = array[i];
                ctx.fillRect(i*5,HEIGHT-value,3,HEIGHT);
            }

           //ctx2.clearRect(700, 700, WIDTH, HEIGHT);
            for ( var i = 0; i < (array.length); i++ ){
                var value = array[i];
                ctx2.beginPath();
				ctx2.arc(300,300,value,0,360,false);
				ctx2.lineWidth=5;
				ctx2.strokeStyle="rgba("+value+","+value+",0,0.2)";
				ctx2.stroke();//畫空心圓
				ctx2.closePath();
        
            }
            //
            requestAnimationFrame(drawSpectrum);
        };

　

4.最終效果

 

6.最新進展

　　文中的getMedia方法（getUserMedia）在chrome 47後已經不可以從非安全源訪問（Insecure Origins）,即http協議,.firefox還可以但不知道為什麼有bug，幾秒鐘後就share裝置失敗。

　　現在chrome開發者可以使用以下方法繼續在非安全源使用這個函式：

　　You can run chrome with the --unsafely-treat-insecure-origin-as-secure="example.com" flag (replacing "example.com"with the origin you actually want to test), which will treat that origin as secure for this session. Note that you also need to include the --user-data-dir=/test/only/profile/dir to create a fresh testing profile for the flag to work

 

 

7.參考

1.MDN

2.api介面查詢

3.chrome

 

 

 

　　

相關文章