时间戳

首页 > 解决方案 > 如何在 JavaScript 中从视频构建音频可视化器

javascript - 如何在 JavaScript 中从视频构建音频可视化器

问题描述

我正在开发一个包含音频播放列表的项目，此外我还必须构建一个音频可视化器。如果源是音频，我对如何执行此操作有一个粗略的想法。问题是，源是一个m3u8，我正在使用Hls.js一个HTML 5视频标签来实现一个 HTTP 实时流。我的目标是构建一个支持 HTTP Live Streaming 并且可以显示可视化的音频播放器。最好的方法是什么？

提前致谢。

标签： javascripthtml5-audiohttp-live-streamingvisualizer

解决方案

希望它会有所帮助

> let video = document.getElementById('videoId'); let audioContext = new
> AudioContext();
> 
> const UsrAg = navigator.userAgent; var stream = null; if
> (UsrAg.indexOf('Firefox') > -1) { stream = video.mozCaptureStream(); }
> else { stream = video.captureStream(); }
> 
> var audioSrc = audioContext.createMediaStreamSource(stream) const
> analyser = audioContext.createAnalyser(); audioSrc.connect(analyser);
> analyser.fftSize = 256; const bufferLength =
> analyser.frequencyBinCount; const frequencyData = new
> Uint8Array(bufferLength);
> 
> 
> function renderFrame() {  requestAnimationFrame(renderFrame);
>   analyser.getByteFrequencyData(frequencyData);   that.setState({
> frequencyData: frequencyData }); } renderFrame();

推荐阅读