![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
用户6937871150665
后端一枚
获得徽章 0
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
提供一个axure原型在谷歌浏览器无法预览的简单解决方案：
在产品给你的原型图内，找到resources-chorme，将axure-chrome-extension.crx改成rar，解压后直接在拓展文件加载已解压文件夹，搞定。
在产品给你的原型图内，找到resources-chorme，将axure-chrome-extension.crx改成rar，解压后直接在拓展文件加载已解压文件夹，搞定。
评论
2
赞了这篇沸点
![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
赞了这篇沸点
关注了标签 
Flutter
Flutter
赞了这篇沸点
前端播放mp3音乐时，如何显示播放的波形图？
"要显示播放的波形图，可以使用Web Audio API来获取音频数据并绘制波形图。以下是一种实现的方法：
1. 创建一个`<canvas>`元素，用于绘制波形图：
```html
<canvas id=\"waveformCanvas\"></canvas>
```
2. 在JavaScript中获取音频数据并绘制波形图：
```javascript
// 获取音频元素
const audio = document.querySelector('audio');
// 创建AudioContext对象
const audioContext = new AudioContext();
// 创建Analyser节点
const analyser = audioContext.createAnalyser();
// 将音频元素与Analyser节点连接
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
// 设置Analyser节点的参数
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
// 获取<canvas>元素和绘图上下文
const canvas = document.getElementById('waveformCanvas');
const canvasContext = canvas.getContext('2d');
// 绘制波形图函数
function drawWaveform() {
// 递归调用绘制函数
requestAnimationFrame(drawWaveform);
// 获取当前音频数据
analyser.getByteTimeDomainData(dataArray);
// 清空画布
canvasContext.clearRect(0,
"要显示播放的波形图，可以使用Web Audio API来获取音频数据并绘制波形图。以下是一种实现的方法：
1. 创建一个`<canvas>`元素，用于绘制波形图：
```html
<canvas id=\"waveformCanvas\"></canvas>
```
2. 在JavaScript中获取音频数据并绘制波形图：
```javascript
// 获取音频元素
const audio = document.querySelector('audio');
// 创建AudioContext对象
const audioContext = new AudioContext();
// 创建Analyser节点
const analyser = audioContext.createAnalyser();
// 将音频元素与Analyser节点连接
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
// 设置Analyser节点的参数
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
// 获取<canvas>元素和绘图上下文
const canvas = document.getElementById('waveformCanvas');
const canvasContext = canvas.getContext('2d');
// 绘制波形图函数
function drawWaveform() {
// 递归调用绘制函数
requestAnimationFrame(drawWaveform);
// 获取当前音频数据
analyser.getByteTimeDomainData(dataArray);
// 清空画布
canvasContext.clearRect(0,
展开
4
2
赞了这篇沸点
赞了这篇文章
赞了这篇文章
赞了这篇沸点
赞了这篇沸点
赞了这篇文章
赞了这篇文章
赞了这篇沸点
www.yuque.com