利用AudioContext与MediaDevices实现实时的音频可视化

最新推荐文章于 2024-05-20 20:02:37 发布

朱nw

最新推荐文章于 2024-05-20 20:02:37 发布

阅读量391

点赞数

分类专栏：前端文章标签： javascript 音频可视化

本文链接：https://blog.csdn.net/sinat_39013092/article/details/115358338

版权

书接上文，上一篇博客我们知道了怎么通过MediaDevices获得用户的麦克风数据。

这篇博客我们就实现将用户的音频数据实时的绘制出来。

<!DOCTYPE html>

<head></head>

<body>
	<canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var constraints = {
     audio: true, video: false }
        var promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (stream) {
    
        
        });

        promise.catch(function (error) {
    
            console.log(error)
        });
    </script>
</body>

保留上一篇博客代码的基本结构。我将对获取的MediaStream数据进行处理。

var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream); // 从MediaStream中创建源
var analyser = audioCtx.createAnalyser();
source.connect(analyser); // 将源连接到分析器
analyser.fftSize = 256; // 用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。
var bufferLength = analyser.frequencyBinCount; // fftSize/2
var dataArray = new Uint8Array(bufferLength);

获取数据并绘制

var drawVisual;
var canvas = document.getElementById('canvas');
var canvasCtx = canvas.getContext("2d");
function draw() {
   
   drawVisual = requestAnimationFrame(draw);
   analyser.getByteFrequencyData(dataArray);
   canvasCtx.fillStyle = 'rgb(0, 0, 0)';
   canvasCtx.fillRect(0, 0, 500, 500);
   var barWidth = 500 / bufferLength;
   var barHeight

最低0.47元/天解锁文章

朱nw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用AudioContext与MediaDevices实现实时的音频可视化

书接上文，上一篇博客我们知道了怎么通过MediaDevices获得用户的麦克风数据。这篇博客我们就实现将用户的音频数据实时的绘制出来。<!DOCTYPE html><head></head><body> <canvas id="canvas" width="500" height="500"></canvas> <script> var constraints = { audio: tr
复制链接

扫一扫

专栏目录