最近研究个新玩意，叫window.AudioContext;不懂？没关系，我也是才接触，这完全可以说个全新领域，
这玩意干啥的？顾名思义，媒体上下文，也就是你媒体的数据分析，就是一串数据啊？那有啥用呢？对，单纯的数据毫无意义，但是如果把数据结合canvas，就会产生神奇的效果（比如百度的echart），这里的AudioContext结合canvas就能产生一个音乐可视化的效果，就是那种手机MP3播放器的效果，又叫音乐可视化；
首先原理：
前端获取到buffer数据，然后运用解析对象，把数据解析，把解析结果放到数组里面，然后连接，最后用canvas画出来；

后台代码

const express = require('express');

const fs = require('fs')；

const app = express();

app.get('/app/test', function(req,res) {

  fs.readFile('Maksim-克罗地亚狂想曲.mp3', (err, name) => {

      if (err) return

      res.send(name)

  })

})

html部分

<body>

<input type="range" id="radio"> //改变音量的

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

</body>

首先前端发起请求，请求音乐的流

      function getdata () {

          var xhr = new XMLHttpRequest()

          xhr.open('get', '/app/test');

           xhr.responseType = 'arraybuffer';

          xhr.onload = function () {

          // 解析后台传来的数据，然后把数据复制到前端的buffer上；

          第一个链接的必须是分析者，分析者获取原始数据

              ac.decodeAudioData(xhr.response, function (buffer){

                  var buffesource = ac.createBufferSource();// 创建数据，其中buffersource还有个属性是loop就是音乐是不是循环播放
                  buffesource.buffer = buffer

                  buffesource.connect(analyser)

                  buffesource.start(0) //这里star可以三个参数，一次意思是，等待多久播放，从哪里开始播放，播放多久

              }, function (err) {

                  console.log(err)

              })

          }

          xhr.send()

      }

然后创建音频控制对象

      var ac = new (window.AudioContext || window.webkitAudioContext)() //这是兼容浏览器的写法

      var gainNode = ac[ac.createGain ? 'createGain' : 'createGainNode']() 这个老式和新式api不同

        var analyser = ac.createAnalyser() //创建分析者

        var size = 128

        analyser.fftSize = size * 2;// 这里获取柱子个数就是ffsize的一半

        analyser.connect(gainNode)

        gainNode.connect(ac.destination)

初始化canvas

        function caninit () {

            var line = ctx.createLinearGradient(0,0,0,600)

            line.addColorStop(0,'red')

            line.addColorStop(.5, 'yellow')

            line.addColorStop(1, 'green')

            ctx.fillStyle = line

        }

        caninit()

赋值原始数据到数组

        function asyc () {

            var arr = new Uint8Array(analyser.frequencyBinCount)

            analyser.getByteFrequencyData(arr)

            draw(arr)

            nextFrame(asyc)

        }

定一个unit8数组，然后把数据赋值进去.注意这里不是不是8位无符号数组，那么analyser.getByteFrequencyData这个方法会报错，说第一个参数必须uint8array

最后画出效果

        function draw (arr) {

            ctx.clearRect(0, 0, width, height)

            var w = width / size

            for (var i = 0; i < arr.length; i++) {

              var h = (arr[i] / 512) * height;

              ctx.fillRect(w * i, height - h, w *.6, h)

            }

        }

ok可以了，页面效果是这样的

全部代码正在整理上传，各位有兴趣可以写几个echart的类型表玩玩啊

music， let's go的更多相关文章

  1. Pyhton开源框架(加强版)

    info:Djangourl:https://www.oschina.net/p/djangodetail: Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC)风格的 ...

  2. MPlayer

    名称   mplayer − 电影播放器 mencoder − 电影编解码器 概要   mplayer [选项] [文件|URL|播放列表|−] mplayer [选项] 文件1 [指定选项] [文件 ...

  3. python 爬取腾讯微博并生成词云

    本文以延参法师的腾讯微博为例进行爬取并分析 ,话不多说 直接附上源代码.其中有比较详细的注释. 需要用到的包有 BeautifulSoup WordCloud jieba # coding:utf-8 ...

  4. 面经 cisco

    1. 优先级反转问题及解决方法 (1)什么是优先级反转 简单从字面上来说,就是低优先级的任务先于高优先级的任务执行了,优先级搞反了.那在什么情况下会生这种情况呢? 假设三个任务准备执行,A,B,C,优 ...

  5. linux驱动(续)

    网络通信 --> IO多路复用之select.poll.epoll详解 IO多路复用之select.poll.epoll详解      目前支持I/O多路复用的系统调用有 select,psel ...

  6. HttpServletRequest对象(一)

    javaweb学习总结(十)——HttpServletRequest对象(一) 一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HT ...

  7. 故障重现(内存篇2)，JAVA内存不足导致频繁回收和swap引起的性能问题

    背景起因: 记起以前的另一次也是关于内存的调优分享下   有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...

  8. 先说IEnumerable，我们每天用的foreach你真的懂它吗？

    我们先思考几个问题: 为什么在foreach中不能修改item的值? 要实现foreach需要满足什么条件? 为什么Linq to Object中要返回IEnumerable? 接下来,先开始我们的正 ...

  9. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  10. Angular2入门系列教程3-多个组件，主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

随机推荐

  1. java.lang.IllegalStateException: Failed to load property source from location 'classpath:/application.yml'

    java.lang.IllegalStateException: Failed to load property source from location 'classpath:/applicatio ...

  2. 对于PHP绘图技术的理解

    要使用PHP绘图,就得在php.ini文件中设置一下 找到这个位置 ;extension=php_gd2.dll,然后把前面的分号去掉,重启下apache就可以了 几乎每行代码我都写了注释,方便看懂 ...

  3. 再论C++引用(reference)类型

    很多C++初学者搞不清楚C++引用类型,不知有什么用,所以也不知怎么用.一个问题令人迷惑,不是读者有问题,而是教科书有问题. 和多数初学者一样,笔者在初学C++时,关于引用类型,教科书上也是如下表所述 ...

  4. 用js实现导出功能将html中的table导出为excel

    /** * 描述:导出表格对应的excel文件 * 时间:2018-03-29 * 作者:任恩远 * 调用示例: * onclick = "tableToExcel(tableId,file ...

  5. 请问在一个命令上加什么参数可以实现下面命令的内容在同一行输出。 echo "zhaokang";echo "zhaokang"

    请问在一个命令上加什么参数可以实现下面命令的内容在同一行输出. echo "zhaokang";echo "zhaokang" [root@zhaokang t ...

  6. 运维与架构—Nginx的优缺点

    Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构 它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一 Nginx ...

  7. SpringAOP的自定义注解实践

    springaop属于spring的重要属性,在java中有相当广泛的用途,大家一般都接触过aop实现事务的管理,在xml里配好声明式事务,然后直接在service上直接加上相应注解即可, 今天我们来 ...

  8. Hadoop生态新增列式存储系统Kudu

        Hadoop生态系统发展到现在,存储层主要由HDFS和HBase两个系统把持着,一直没有太大突破.在追求高吞吐的批处理场景下,我们选用HDFS,在追求低延迟,有随机读写需求的场景下,我们选用H ...

  9. 基于visual studio 2017 以及cubemx 搭建stm32的开发环境（1）

    参考如下文档: 传送门:http://www.stm32cube.com/article/128 如果链接不存在的话,下载我截屏好的图: 传送门:https://pan.baidu.com/s/1NC ...

  10. Linux入门——基础系统设置命令

    以下为centos7实验环境 1.网卡管理工具命令——nmcli 参考:http://www.iteye.com/topic/1141839 2.主机名称设置——hostnamectl [root@s ...