canvas和AudioContext实现音频柱状图

已于 2023-03-24 16:16:50 修改
阅读量769 收藏 1
点赞数 1
于 2021-11-30 15:32:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43843679/article/details/121634130
版权

html5 css html

在这里插入图片描述
需要一个audio标签和canvas标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        display: block;
        background: #c6d2c9;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!--<audio src="http://www.ttistt.com/music/2.mp3"></audio>-->
      <audio src="kda.mp3"></audio>
    </div>
    <canvas></canvas>
  </body>
</html>

先搞一下一些基本的前置条件

let c = document.querySelector("canvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
window.onresize = function () {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
};
let cxt = c.getContext("2d");
// 定义线性渐变位置和颜色
let color = cxt.createLinearGradient(
    c.width / 2,
    c.height / 2 - 100,
    c.width / 2,
    c.height / 2 + 100
);
color.addColorStop(0, "#32edf9");
color.addColorStop(0.5, "#e38cf5");
color.addColorStop(1, "#a2f591");
 
// 获取audio元素
let audio = document.querySelector("audio");
 
// 设置音量大小 循环
audio.volume = 1;
audio.loop = "loop";
 
// 搞一个开关控制音乐播放
let off = false;
 
// 音频数据
let voiceL = null;
 
// 定义显示的数量
let count = 200;
 
// 点击文档控制播放停止
document.addEventListener("click", function () {
    off ? audio.pause() : audio.play();
    off = !off;
    create(); //需要完成的方法
});

定义create方法

function create(params) {
  let actx = new AudioContext();
 
  // 创建一个AnalyserNode，用来获取音频时间和频率数据
  let ayser = actx.createAnalyser();
 
  // 搞到所需要的音频资源
  let aSrc = actx.createMediaElementSource(audio);
}

让音频资源和分析者进行关联

// 关联分析
aSrc.connect(ayser);
// 关联最终的目标点
aSrc.connect(actx.destination);

创建一个无符号8位数组，用于存放音频数据，长度取frequencyBinCount

voiceL = new Uint8Array(ayser.frequencyBinCount);

构造一个draw方法用于绘制音频图

function draw() {
  cxt.clearRect(0, 0, c.width, c.height);
 
  // getByteFrequencyData()方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中
  ayser.getByteFrequencyData(voiceL);
  
  // 因为只显示200个所以要搞一下显示的间隔
  let step = Math.round(voiceL.length / count);
 
  for (let i = 0; i < count; i++) {
    let j = voiceL[i * step];
    // 设置填充色
    cxt.fillStyle = color;
    // 从中间向两边填充
    cxt.fillRect(c.width / 2 + i * 10, c.height / 2, 5, j);
    cxt.fillRect(c.width / 2 - i * 10, c.height / 2, 5, j);
    cxt.fillRect(c.width / 2 + i * 10, c.height / 2, 5, -j);
    cxt.fillRect(c.width / 2 - i * 10, c.height / 2, 5, -j);
  }
  requestAnimationFrame(draw);
}

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        display: block;
        background: #c6d2c9;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!--<audio src="http://www.ttistt.com/music/2.mp3"></audio>-->
      <audio src="kda.mp3"></audio>
    </div>
    <canvas></canvas>
    <script>
      let c = document.querySelector("canvas");
      c.width = window.innerWidth;
      c.height = window.innerHeight;
      window.onresize = function () {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
      };
      let cxt = c.getContext("2d");
      // 定义线性渐变位置和颜色
      let color = cxt.createLinearGradient(
        c.width / 2,
        c.height / 2 - 100,
        c.width / 2,
        c.height / 2 + 100
      );
      color.addColorStop(0, "#32edf9");
      color.addColorStop(0.5, "#e38cf5");
      color.addColorStop(1, "#a2f591");
 
      // 获取audio元素
      let audio = document.querySelector("audio");
      // 设置音量大小
      audio.volume = 1;
      audio.loop = "loop";
      // 搞一个开关控制音乐播放
      let off = false;
      // 音频数据
      let voiceL = null;
      // 定义显示的数量
      let count = 200;
      // 点击文档控制播放停止
      document.addEventListener("click", function () {
        off ? audio.pause() : audio.play();
        off = !off;
        create();
      });
 
      function create(params) {
        let actx = new AudioContext();
        // 创建一个AnalyserNode，用来获取音频时间和频率数据
        let ayser = actx.createAnalyser();
        // 搞到所需要的音频资源
        let aSrc = actx.createMediaElementSource(audio);
 
        // 关联分析
        aSrc.connect(ayser);
        // 关联最终的目标点
        aSrc.connect(actx.destination);
 
        // 获取一个可视化的数量 frequencyBinCount 的值固定为 AnalyserNode 接口中fftSize值的一半
        voiceL = new Uint8Array(ayser.frequencyBinCount);
        draw();
        function draw() {
          cxt.clearRect(0, 0, c.width, c.height);
          // getByteFrequencyData()方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中
          ayser.getByteFrequencyData(voiceL);
          // 因为只显示200个所以要搞一下显示的间隔
          let step = Math.round(voiceL.length / count);
          for (let i = 0; i < count; i++) {
            let j = voiceL[i * step];
            // 设置填充色
            cxt.fillStyle = color;
            // 从中间向两边填充
            cxt.fillRect(c.width / 2 + i * 10, c.height / 2, 5, j);
            cxt.fillRect(c.width / 2 - i * 10, c.height / 2, 5, j);
            cxt.fillRect(c.width / 2 + i * 10, c.height / 2, 5, -j);
            cxt.fillRect(c.width / 2 - i * 10, c.height / 2, 5, -j);
          }
          requestAnimationFrame(draw);
        }
      }
    </script>
  </body>
</html>
花儿开富贵花
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html音乐播放器 频谱,HTML5 Canvas 实现简易 绘制音乐环形频谱图
weixin_26741799的博客
06-20 950
0.启发在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。B站截图B站截图B站截图所以今天我就用 Canvas 做个简单 环形频谱图。那么~ ヾ(ｏ･ω･)ﾉ 开始吧！1.首先绘制静态的效果静态效果绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了var wrap = document.getElem...
封装的录音工具带有音频柱状图
11-16
封装的录音工具，带有开始，暂停，播放，结束等功能，并且能获得声音大小描绘分贝柱状图
利用 web audio api 实现音频可视化
weixin_34128501的博客
08-25 590
音频可视化实现之后真的很酷，虽然这次只是跟着MDN上的教程学习了一下，照着Demo敲了一遍而已。但收获颇多，记录于此。 web audio api 先来感受一下 web audio api 的基础概念，下面截取一段MDN上的介绍。具体的请移步文档 Web audio 概念与使用 Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作，具有模块化路由的特点。在音...
音频频谱分析柱状图
07-14 4462
原文地址：音频频谱分析柱状图作者：倚落慕沙 Android 2.3 提供了类 android.media.audiofx.Visualizer 支持获取音频FFT数据, 剩下的工作就只是显示在界面上了。   ApiDemos 提供了Sample com.example.android.apis.media.AudioFxDemo   参考资料   http://topic.csdn.net/u
前端JS特效第13波：html5带音频波纹的可视化音乐播放器代码
最新发布
wangtianming88的专栏
07-03 222
html5带音频波纹的可视化音乐播放器代码，有一个波纹的效果，在个人网站中，放一个音乐看起来效果也是很不错的哦，一般网页游戏个人网站会用到这样的特效
canvas绘制音频波形-纯js自写
11-04
canvas绘制音频波形demo
MFC实现音频柱状图显示(利用FFT绘制音频频谱)
u012983289的博客
09-10 1893
编译环境：vs2013、 MFC 语言：C++ 描述：通过对WAV格式的音频数据进行FFT傅里叶变换处理后，再进行柱状图可视化显示 实现效果图： 项目下载地址：https://download.csdn.net/download/u012983289/12832690 参考文献：https://blog.csdn.net/qq_36568418/article/details/91536032 ...
WAV音频数据柱状图可视化
09-10
MFC框架下，通过把WAV格式的音频数据经FFT处理后，将得到的数据进行音频柱状图可视化显示，有需要的朋友可以参考下（编译环境是VS2013、C++）
音频条形图
10-15
博客地址： http://blog.csdn.net/u010156024/article/details/49157769 欢迎访问交流。
原生canvas实现柱状图封装
07-01
在这个过程中，我们将涉及到`canvas-bar-across.html`和`canvas-extension.js`两个文件，它们分别用于展示柱状图的HTML结构和实现柱状图绘制的JavaScript逻辑。 首先，HTML文件`canvas-bar-across.html`中通常会...
基于微信小程序 Canvas API 实现的柱状图和趋势图
03-29
let Line = require('../../utils/line.js');... setCanvasSize: o=>this.setData({lineCtxHeight:o.height}), //设置 canvas 的高度，至于宽度，当前是限制宽度只能占满屏幕，暂时没有提供接口  onTouch: e=
html5中canvas图表实现柱状图的示例
09-27
在这个示例中，我们将探讨如何使用Canvas绘制柱状图，一种常见的数据可视化图表。柱状图可以有效地展示分类数据之间的比较，通常用于表示各类别的数量或比例。 首先，让我们分析一下主要的知识点： 1. **文本的...
AudioContext+canvas实现音频可视化
weixin_33834628的博客
11-29 1801
1.创建AudioContext对象 AudioContext() 构造方法创建了一个新的 AudioContext 对象 它代表了一个由音频模块链接而成的音频处理图, 每一个模块由 AudioNode 表示. let AudioContext = window.AudioContext || window.webkitAudioContext; let audioContext = new Au...
html5音频文件生成波形图代码,HTML5/D3.js 可视音频波形柱状图
weixin_28849465的博客
06-05 844
JavaScript语言：JaveScriptBabelCoffeeScript确定(function() {var playBtn = document.getElementById('playBtn');var myAudio = new Muvis("/uploads/160601/Find_My_Way_Home.mp3", {dataMax: 50,onLoad: function() ...
用canvas构建柱状图
m0_63757700的博客
10-09 1285
canvas
绘制音量调节视图
第九区域
10-10 1001
今天看到一篇自定义音量图标的，觉得也不错，自己改改就来用。是不是你想看到的？如果不是，那返回吧~~~~- -!!下面就是我这个绘制的处理 分化细节，定义成员 // 画笔 private Paint paint = new Paint(); // 矩阵 private Matrix matrix = new Matrix(); // 音量图标状态 pri
unity实时音频可视化
sxj676的博客
10-06 581
最近需要实现unity将实时接受的音频可视化，在网上找了半天，基本实现的都是将已有的音频文件可视化的，唯一找到的一个的做法还是取点画拖尾，得让unity的镜头随着它移动，不太适合，所以只能自己缝缝补补，结合了一下他们的做法。基本的想法就是用xchart在unity中画一个柱状图，然后每帧去获取录取的音频的散点数值，从中取n个点赋值给柱子的高度，就能让柱状图随着接受的音频改变而不停跳动了。大家做的时候记得要把脚本里获取的音频数值数量改成和自己柱状图柱体的数量一致。
JS特效第55弹：canvas音谱可视化mp3音乐播放器代码
weixin_38343072的博客
12-30 582
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值