最近研究个新玩意，叫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. css一边固定，另一边自适应的方法

    第一种: 第二种:

  2. Elastix 2.4 双服务器热备搭建文档

    一.     背景知识 本文档将会用到以下两个重要的组件: a)     DRBD DRBD的全称为:Distributed Replicated Block Device,意为分布式块设备复制, D ...

  3. Font Awesome图标字体

    1.unicode unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器. 支持按字体的方式去动态调整图标大小,颜色等等. 但是因为是字体,所以不支持多色 ...

  4. linux下环境变量PS1-命令提示符

    1.字体颜色 1.1颜色及对应数字 颜色表 前景 背景 颜色 30     40   黑色 echo -e "\e[30mforegroud\e[m\e[40mbackground\e[m& ...

  5. 一张图一个表——CSS选择器总结

    CSS选择器总结: (这些表是一张图片^_^) 看底部 完整思维导图图片和表格的下载地址:https://download.csdn.net/download/denlnyyr/10597820 (我 ...

  6. CSS 清楚浮动总结

    1.clear属性. 注:设置子元素(伪元素或DIV等其它元素) 2.触发BFC. 注:根元素HTML float不为none overflow不为visibile display为inline-bl ...

  7. 使用for in 循环数据集

    在DELPHI没有FOR IN的语法时,我们要使用如下代码枚举数据集中的每个内容: cds.First; while not cds.eof do begin ... cds.Next; end; 最 ...

  8. ILOVEYOU代码

    代码确实很简单...我是初学者,练手的. /* 文件名: Love.c 描 述: 打印字母和图形 */ #include<stdio.h> #include<windows.h> ...

  9. C语言程序设计：现代方法（第2版）第三章全部习题答案

    前言 本人在通过<C语言程序设计:现代方法(第2版)>自学C语言时,发现国内并没有该书完整的课后习题答案,所以就想把自己在学习过程中所做出的答案分享出来,以供大家参考.这些答案是本人自己解 ...

  10. windows系统下系统变量path误删恢复方法

    每台计算机安装程序不同,环境变量path会有不同,若误删了环境变量path,可以如下完美解决.   Win+R 输入regedit打开注册表(开始-运行里输入regedit) 找到  HKEY_LOC ...