最近研究个新玩意，叫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. Web前端---HTTP协议

    目录 HTTP协议 一.http协议概述 二.http请求报文 1.GET请求 2.POST请求 三.http响应报文 1.响应报文内容 2.状态码(Status Code) HTTP协议 一.htt ...

  2. Python中级 —— 01面向对象进阶

    面向对象进阶 总结.补充(http://blog.csdn.net/fgf00/article/details/52479307) 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 ...

  3. golang总结-并发

    目录 2.7 并发编程 go协程 go管道 2.7 并发编程 go协程 golang 通过一个go关键字就可以开启一个协程. func main() { //两个交错输出 go sayHello() ...

  4. Java操作Redis（一）

    一.创建项目,导入依赖 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis& ...

  5. usb驱动之打印usb设备信息（二）

    以下是打印鼠标左右键及其他输入的源代码,详细说明见https://www.cnblogs.com/zhu-g5may/p/9309381.html /*参考/drivers/hid/usbhid/us ...

  6. stm32串口中断总结

    串口文件uart.c需要被用到; 串口通信是对GPIO端口引脚的功能复用,因此需要用到gpio.c; 因为中断的产生,因此中断文件也是需要用到的: 中断响应函数需要自己编写: 接收中断:在接收移位寄存 ...

  7. Hadoop学习（一）

    今天刚刚从hadoop网址下载了edition 0.21,上传到公司内网 server上试了一把. 跟着官方网站走了一趟,在执行 Format a new distributed-filesystem ...

  8. Linux下c语言实现myod

    首先根据od要输出16进制的功能,以及c语言中文件的打开读取等函数,编写了如下代码. #include<stdio.h> #define N 1000 int main() { int c ...

  9. IDEA下安装与使用Junit4

    安装Junit4 打开File->Settings->Plugins,单击下图所示按钮 搜索JunitGeneratorV2.0并安装 重启IDEA 打开File->Project ...

  10. 【BZOJ4543】Hotel加强版

    [BZOJ4543]Hotel加强版 题面 bzoj 洛谷 $ps:$在洛谷看题在bzoj交... 题解 我们分析一下这个问题,要怎么样的点才满足三点距离两两相等呢? 1.存在三个点有共同的$LCA$ ...