今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>HTML5音频可视化频谱跳动代码</title>

  <style>

    * {

      margin: ;

      padding: ;

    }

    #canvas {

      display: block;

      background: linear-gradient(135deg, rgb(, , ) %, rgb(, , ) %);

    }

  </style>

</head>

<body>

  <audio id="myaudio" src="./mp3.mp3"></audio>

  <canvas id="canvas"></canvas>

  <script>

    window.onload = function () {

      var oAudio = document.getElementById('myaudio');

      window.onclick = function () {

        if (oAudio.paused) {

          oAudio.play();

        } else {

          oAudio.pause();

        }

      }

      // 创建音频上下文对象

      var oCtx = new AudioContext();

      // console.log(oCtx);

      // 创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作

      var audioSrc = oCtx.createMediaElementSource(oAudio);

      // 创建分析机

      var analyser = oCtx.createAnalyser();

      // 媒体源与分析机连接

      audioSrc.connect(analyser);

      // 输出的目标：将分析机分析出来的处理结果与目标点（耳机/扬声器）连接

      analyser.connect(oCtx.destination);

      // 效果（实现的具体方法）

      // 绘制音频图的条数(fftSize)

      /*

        根据分析音频的数据去获取音频频次界定音频图的高度

        放在与音频频次等长的8位无符号字节数组

        Uint8Array:初始化默认值为1024

      */

      // 利用cancas渐变进行音频绘制

      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;

      canvas.height = window.innerHeight;

      var oW = canvas.width;

      var oH = canvas.height;

      var color1 = ctx.createLinearGradient(oW / , oH /  - , oW / , oH /  - );

      var color2 = ctx.createLinearGradient(oW / , oH /  + , oW / , oH /  + );

      color1.addColorStop(, '#000');

      color1.addColorStop(., '#069');

      color1.addColorStop(, '#f6f');

      color2.addColorStop(, '#000');

      color2.addColorStop(., '#069');

      color2.addColorStop(, '#f6f');

      // 音频图的条数

      var count = ;

      // 缓冲区:进行数据的缓冲处理，转换成二进制数据

      var voiceHeight = new Uint8Array(analyser.frequencyBinCount);

      // console.log(voiceHeight);

      function draw() {

        // 将当前的频率数据复制到传入的无符号字节数组中，做到实时连接

        analyser.getByteFrequencyData(voiceHeight);

        // console.log(voiceHeight);

        // 自定义获取数组里边数据的频步

        var step = Math.round(voiceHeight.length / count);

        ctx.clearRect(, , oW, oH);

        for (var i = ; i < count; i++) {

          var audioHeight = voiceHeight[step * i];

          ctx.fillStyle = color1;  // 绘制向上的线条

          ctx.fillRect(oW /  + (i * ), oH / , , -audioHeight);

          ctx.fillRect(oW /  - (i * ), oH / , , -audioHeight);

          ctx.fillStyle = color2;  // 绘制向下的线条

          ctx.fillRect(oW /  + (i * ), oH / , , audioHeight);

          ctx.fillRect(oW /  - (i * ), oH / , , audioHeight);

        }

        window.requestAnimationFrame(draw);

      }

      draw();

      /*

        analyserNode 提供了时时频率以及时间域的分析信息

            允许你获取实时的数据，并进行音频可视化

            analyserNode接口的fftSize属性

                fftSize:无符号长整型值，用于确定频域的FFT(快速傅里叶变换)

                ffiSize属性值是从32位到32768范围内的2的非零幂,默认值是2048

      */

    }

  </script>

</body>

</html>

其效果图为：

HTML5音频可视化频谱跳动代码的更多相关文章

  1. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  2. H5录音音频可视化-实时波形频谱绘制、频率直方图

    这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...

  3. 用webAudio和canvas实现音频可视化

    前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化. 大致流程是对音源进行解析,解析得到的数据是个频谱数 ...

  4. Adobe edge animate制作HTML5动画可视化工具（一）

    Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...

  5. [C#] NAudio 库的各种常用使用方式: 播放 录制 转码 音频可视化

    概述 在 NAudio 中, 常用类型有 WaveIn, WaveOut, WaveStream, WaveFileWriter, WaveFileReader 以及接口: IWaveProvider ...

  6. [C#] 使用 NAudio 实现音频可视化

    预览: 捕捉声卡输出: 实现音频可视化, 第一步就是获得音频采样, 这里我们选择使用计算机正在播放的音频作为采样源进行处理: NAudio 中, 可以借助 WasapiLoopbackCapture ...

  7. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  8. html5音频视频专题

    html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...

  9. vue解决音频可视化播放，使用wavesurfer.js

    vue解决音频可视化播放,使用wavesurfer.js 上效果:   1.安装wavesurfer  npm install wavesurfer.js 2.在页面导入 import WaveSur ...

随机推荐

  1. ML一：python的KNN算法

    (1):list的排序算法: 参考链接:http://blog.csdn.net/horin153/article/details/7076321 示例: DisListSorted = sorted ...

  2. APICloud开发小技巧（一）

    apicloud开发文档中,前端开发框架指的就是,类似jq\js的语法: https://docs.apicloud.com/Front-end-Framework/framework-dev-gui ...

  3. java并发的一些杂乱小结

    1.java语言本身就提供了多线程机制,这样即使在单任务的操作系统上也可以实现多线程,这也是java语言本身"编写一次,到处运行"的特性. 2.并发要解决的问题本质上是:多个线程同 ...

  4. 企业级任务调度框架Quartz(6) 任务调度器（Scheduler）

    前序:      我们已经在前面的内容能里看到了,我们用 Scheduler 来管理我们的 Job:创建并关联触发器以使 Job 能被触发执行:以及如可选择 calendar 为给定的时程安排提供更多 ...

  5. python编写简单的html登陆页面（4）

    python编写简单的html登陆页面(4)   1  在python编写简单的html登陆页面(2)的基础上在延伸一下: 可以将动态态分配数据,建立表格,存放学生信息 2 实现的效果如下: 3  动 ...

  6. Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档

    0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...

  7. sklearn学习2-----LogisticsRegression

    1.官网地址: http://scikit-learn.org/stable/modules/generated/sklearn.linear_model.LogisticRegression.htm ...

  8. 使用kubeadm在CentOS上搭建Kubernetes1.14.3集群

    练习环境说明:参考1 参考2 主机名称 IP地址 部署软件 备注 M-kube12 192.168.10.12 master+etcd+docker+keepalived+haproxy master ...

  9. 地图API示例

    http://developer.baidu.com/map/jsdemo.htm#i6_2

  10. Elasticsearch 入门 - 安装、启动和配置

    安装 请参阅elastic官网 :Installing Elasticsearch 启动 使用 ./bin/elasticsearch 命令即可启动 使用 ./bin/elasticsearch -d ...