今天学习到用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. 励志：98岁老爷爷用Windows系统自带画图软件制作的神作

    哈尔拉斯科,是一位很出名的老爷爷,他70岁才接触MS Paint(就是我们熟知的Windows自带的画图软件).他曾经是一名图形艺术家,但是之前他都是手工创作.他熟知怎么用双手进行艺术创作.但是后来, ...

  2. CreateFile打开文件或者打开目录

    一.打开目录 参数列表: lpFileName String 要打开的文件的名字 dwDesiredAccess Long 如果为 GENERIC_READ 表示允许对设备进行读访问:如果为 GENE ...

  3. BZOJ 1303: [CQOI2009]中位数图 问题转化_扫描_思维

    将比 b 大的设成 1,比 b 小的设成 -1,开个桶左右扫描一下,乘法原理乘一乘就好了. 虽然一眼切,不过这个基于中位数的转化还是相当重要的.middle 那个主席树的题也需要该做法 Code: # ...

  4. 安装ubuntu14.04之后要做的一些事

    前言: 用ubuntu14.04也有一段时间了,感觉与之前版本相比还是在挺多方面有了改进.但刚装完还是有一些小问题需要自己动手解决.鉴于网上的内容太过零碎,有些方案也太过老旧,因此在这里为大家总结一些 ...

  5. IOS - Display a base64 image within a UIImageView： 显示一个base64的图片

    base64字符串(base64String)-存的是image数据NSData* data = [[NSData alloc] initWithBase64EncodedString:base64S ...

  6. php 流

    php:// — 访问各个输入/输出流(I/O streams) 说明 PHP 提供了一些杂项输入/输出(IO)流,允许访问 PHP 的输入输出流.标准输入输出和错误描述符, 内存中.磁盘备份的临时文 ...

  7. mybatis 批量导入数据到mysql返回批量Id

    1.首先mybatis版本必需是3.3.1或以上 2.mapper配置文件中 <insert id="insertOrderBatch" parameterType=&quo ...

  8. Supervisor 从入门到放弃

    前言 Supervisor是一个客户端/服务器系统,允许其用户在类UNIX操作系统上控制许多进程.(官方解释) 简单点来讲,就是一个监控脚本运行的工具,不过他可以统一化管理,laravel的队列文档上 ...

  9. FCN图像分割

    一. 图像语义分割 传统的图像分割方法主要包括以下几种: 1)基于边缘检测 2)基于阈值分割 比如直方图,颜色,灰度等 3)水平集方法 这里我们要说的是语义分割,什么是语义分割呢?先来看张图: 将目标 ...

  10. MAVEN项目的搭建

    MAVEN能为我们做什么? 1.Jar的声明式依赖性管理 2.项目的自动构建 搭建流程 环境配置 http://maven.apache.org/download.html 下载最新版本Maven 3 ...