如何在 JavaScript 中从视频构建音频可视化工具

Question

我正在开发一个项目，该项目将有一个音频播放列表，除此之外我还必须构建一个音频可视化工具。如果源是音频，我对如何执行此操作有一个粗略的想法。问题是，源是

m3u8

，我使用

Hls.js

和

HTML 5

视频标签来实现 HTTP 实时流媒体。我的目标是构建一个支持HTTP Live Streaming并且可以显示可视化的音频播放器。最好的方法是什么？

提前致谢。

Answer 1

希望有帮助

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();