今天学习到用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. GEF入门笔记

    最近项目中需要用到Eclipse GEF框架进行画图,故将平时学习笔记更新到博客中,便于查阅 自己画的一个GEF基本结构     最基本流程 1.创建model(包括数据域.在界面中的布局.图片索引等 ...

  2. input输入值限制

    限制输入框只能输入数字并且保留两位小数 <input type= "text" onkeyup="var p2 = parseFloat(value).toFixe ...

  3. JS 输入年份，再输入月份，弹出这个月有多少天？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. BitmapMesh动画

    一.概要 我们经常用到Canvas.drawBitmap方法,却很少用到Canvas.drawBitmapMesh方法.这个方法为我们做图片变形提供了无限可能,同时也对数学功底有较高的要求.下面先看一 ...

  5. Tomcat在处理POST和GET提交方式时的字符编码问题

    部分内容参考http://yejg1212.blog.163.com/blog/static/3958206120098384327191(原作者:飞翔)  一.POST和GET请求方式的区别: 在默 ...

  6. python之异常处理模块

    一 . python 内置的异常类 在程序运行过程中,如果出现错误,python解释器会创建一个异常对象,并抛出给系统运行时.即程序终止正常执行流程,转而执行异常处理流程. 在某种特殊条件下,代码中也 ...

  7. POJ 2115 C Looooops（ 简单拓欧 + 快速幂 ）

    链接:传送门 题意:题目中给出一个循环 for (variable = A; variable != B; variable += C) ,这个东东还需要 mod 2^k 问至少多次能退出,如果进入死 ...

  8. 搞定PHP面试 - 运算符知识点整理

    一.算术运算符 1. 概览 例子 名称 结果 $a + $b 加法 $a 和 $b 的和. $a - $b 减法 $a 和 $b 的差. $a * $b 乘法 $a 和 $b 的积. $a / $b ...

  9. 正确判断js数据类型 总结记录

    正确判断js数据类型 总结记录 判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. 三方库. js六大数据类型 number: 数 ...

  10. GOF23设计模式之建造者模式

    GOF23设计模式之建造者模式 场景: 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样的一个问题需要处理: 装配这些子组件是不是有个步骤问题? 实际开发中,我们所 ...