今天学习到用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. CaptCha的现状与未来

    2011年的老文.................转自于伯乐在线:http://blog.jobbole.com/4655/       有一个机会,朋友推荐一个创业的哥们给我认识,方向就是验证码识别 ...

  2. 巧用Ajax的beforeSend提高用户体验

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend:function(){ ...

  3. AssemblyInfo.cs 文件信息

    using System.Reflection; using System.Runtime.CompilerServices; using System.Runtime.InteropServices ...

  4. 动态给某一个元素添加active

    <li class="one_data" data-id='+ navGroup.self_first_nav[i].id +'><a  href='+ navG ...

  5. div与div之间的拖拽

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

  6. Java的编译与运行

    编译: 是指将我们编写的Java源文件翻译成JVM认识的 .class 文件, 在这个过程中,javac 编译器会检查我们所写的程序是否有错误,有错误就会提示出来,如果没有错误就会编译成功. 运行: ...

  7. vc++实例

  8. struts中日期处理以及文件下载

    日期处理 对于jsp提交的基本数据类型和日期格式为yyyy-MM-dd的自动转换为相应的 对于其它的日期格式需要自定义转换器 局部类型转换器 1,写转换器类(继承StrutsTypeConverter ...

  9. [SCOI2008]奖励关_状压动归_数学期望

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 20; dou ...

  10. python装饰器实现登陆验证

    一: 定义有参数的装饰器 其中 CheckFileByName 是进行验证的过程 二: 登陆方法 三: 实现装饰调用