能否加个频谱进去

[trifolium-x]

我看到有些人他们用h5写的频谱非常的炫酷，macOSX 上几乎没有有频谱的播放器，你用的是js，所以有天然的优势，可以做到mac第一个支持频谱显示的播放器。

[Kerinlin]

我看到有些人他们用h5写的频谱非常的炫酷，macOSX 上几乎没有有频谱的播放器，你用的是js，所以有天然的优势，可以做到mac第一个支持频谱显示的播放器。 https://github.com/Kerinlin/localMusicPlayer,这是我开发的一个本地播放器，带了频谱，使用的是wavesurfer

[sjhector]

实现频谱效果的方法有多种，以下是一种简单的实现方式：

使用 Web Audio API 中的 AnalyserNode 对象来获取音频数据的频域信息。

将频域信息转换为频谱图，可以使用 Canvas API 来绘制频谱图。

将绘制好的频谱图添加到音乐播放器的界面中，可以使用 Vue.js 和 Element UI 来实现。

具体实现步骤如下：

在音乐播放器的组件中，创建一个 AudioContext 对象和一个 AnalyserNode 对象，用于获取音频数据的频域信息。 javascript 复制 // 创建 AudioContext 对象 const audioContext = new AudioContext();

// 创建 AnalyserNode 对象 const analyserNode = audioContext.createAnalyser(); analyserNode.fftSize = 2048; // 设置 FFT 大小 在音乐播放器的组件中，创建一个 Canvas 元素，用于绘制频谱图。 html 复制

javascript 复制 // 在组件的 mounted 钩子函数中获取 Canvas 元素 mounted() { this.canvas = this.$refs.canvas; this.canvasContext = this.canvas.getContext('2d'); } 在音乐播放器的组件中，使用 requestAnimationFrame 方法来循环获取音频数据的频域信息，并将其转换为频谱图，然后绘制到 Canvas 元素中。 javascript 复制 // 循环获取音频数据的频域信息，并将其转换为频谱图，然后绘制到 Canvas 元素中 function drawSpectrum() { // 获取音频数据的频域信息 const dataArray = new Uint8Array(analyserNode.frequencyBinCount); analyserNode.getByteFrequencyData(dataArray);

// 将频域信息转换为频谱图 const canvasWidth = canvas.width; const canvasHeight = canvas.height; const barWidth = canvasWidth / dataArray.length; canvasContext.clearRect(0, 0, canvasWidth, canvasHeight); canvasContext.fillStyle = '#ffffff'; for (let i = 0; i < dataArray.length; i++) { const barHeight = (dataArray[i] / 255) canvasHeight; canvasContext.fillRect(i barWidth, canvasHeight - barHeight, barWidth, barHeight); }

// 循环调用 drawSpectrum 方法 requestAnimationFrame(drawSpectrum); } drawSpectrum(); 在音乐播放器的组件中，将 Canvas 元素添加到界面中，并设置其样式。 css 复制 canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } 通过以上步骤，就可以在该项目中加入频谱效果了。

[lxm6]

你的邮件我已收到，谢谢！