webAudio

WebAudio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对音频添加特效,使音频可视化,添加空间效果 (如平移),等等。详情见MDN查看
静态效果(动态效果详情)  项目github地址



核心代码实现

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
const myAudio = document.querySelector('audio');
//解决音频跨域问题
myAudio.crossOrigin='anonymous'
const canvas = document.querySelector('canvas');
//创建音频上下文
const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
//创建一个新的 AnalyserNode 对象实例。
const analyser = audioCtx.createAnalyser()
//设置fftSize大小
analyser.fftSize = 1024;
var ctx = canvas.getContext('2d')
// 获取声音源
if(!this.mediaElementSource){
this.mediaElementSource =!this.mediaElementSource;
var W = canvas.width = 400;
var H = canvas.height = 100;
var ctx = canvas.getContext('2d')
const source = audioCtx.createMediaElementSource(myAudio)
source.connect(analyser)
source.connect(audioCtx.destination)
}
const bufferLength = analyser.fftSize
//转化为数组使用
const dataArray = new Uint8Array(bufferLength)
//绘制canvas图像
const draw2 = () => {
analyser.getByteFrequencyData(dataArray)
ctx.clearRect(0, 0, W, H)
ctx.fillStyle = 'rgb(15,58,93)'
ctx.fillRect(0, 0, W, H)
const barWidth = (W / bufferLength) * 30
let barHeight
let x = 0;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i] / 2
ctx.fillStyle = `rgb(${barHeight + 121},199,149)`
ctx.fillRect(x, H - barHeight, barWidth, barHeight)
x += barWidth + 1
}
requestAnimationFrame(draw2)
}
draw2()

后续更新webRTC,项目计划筹备中