-
Notifications
You must be signed in to change notification settings - Fork 1
/
webapi.html
145 lines (120 loc) · 4.5 KB
/
webapi.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!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");
}
//var stream = navigator.getUserMedia(constraints, successCallback, errorCallback);
//{ video: true, audio: true }
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 default 2048
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);
}
//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);
};
</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">
//直接从audio处理音频源
var context1;
var source;
var analyserfa;
var canvasFormAudio;
var ctxfa;
canvasFormAudio = document.getElementById('canvasFormAudio');
ctxfa = canvasFormAudio.getContext("2d");
try {
/* 创建 AudioContext. */
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
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坐标，矩形宽，矩形高)
ctxfa.fillRect(i*5,HEIGHT-value,3,HEIGHT);
}
//根据浏览器频率绘图或者操作一些非css效果
requestAnimationFrame(drawSpectrumfa);
}
</script>
</body>
</html>