今天学习到用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. 基于ACE的TAO开发---一个简单的入门实例-----VS2008（二）

    上一节已经说了如何编译idl文件.现在就用编好的文件来写一个最小的corba小程序的.程序分为服务器程序和客户端程序. 说明下,代码是<基于C++CORBA高级编程>一书中的例子. 1.首 ...

  2. 【Vue+Node】解决axois请求数据跨域问题

    项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...

  3. javaee的toString的用法

    toString方法返回该对象的字符串表示,如果不用toString则返回的是地址 package Xuexi; public class Person { private String name; ...

  4. python与php生成二维码对比

    php生成二维码 include 引入的库单独下载 <?php header("Content-type:text/html;charset=utf-8"); error_r ...

  5. buddyinfo 内存碎片数据采集

    不说了,上工具 #cat buddyinfo.sh #!/bin/sh #*************************************************************** ...

  6. BZOJ 1194 [HNOI2006]潘多拉的盒子 (图论+拓扑排序+tarjan)

    题面:洛谷传送门 BZOJ传送门 标签里三个算法全都是提高组的,然而..这是一道神题 我们把这道题分为两个部分解决 1.找出所有咒语机两两之间的包含关系 2.求出咒语机的最长上升序列 我们假设咒语机$ ...

  7. Linux目录结构组成

    linux目录图: / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp --- 用户所有服务 httpd ...

  8. mknod指令详解

    mknod - make block or character special filesmknod [OPTION]... NAME TYPE [MAJOR MINOR]    option 有用的 ...

  9. Python 之 格式化文件

    # 结构化文件存储- xml, json- 为了解决不同设备之间的信息交换 ## XML文件(可扩展标记语言) - 标记语言:语言中使用尖括号括起来的文本字符串标记 - 可扩展:用户可以自己定义需要的 ...

  10. chckBox样式的修改

    在Android开发中,系统自带的默认CheckBox由于比较简陋,可能难以满足部分人的审美需求,不过,Android具有很强的扩展性,自定义CheckBox其实也很简单. 1. Layout中定义C ...