最近研究个新玩意，叫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. [iOS]CIDetector之CIDetectorTypeFace人脸识别

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  2. jQuery笔记: 基本概念与jQuery核心

    目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...

  3. 菜鸟级渣渣 关于MAC系统开发java的吐槽

    最开始买电脑的时候不知道为什么脑子一抽买了个苹果.因为不知道和谁聊的.后期服务器大部分都是linux系统,后期也要学linux系统.mac系统类似linux系统.然后就买了个mac,感觉凭借自己的聪明 ...

  4. js数组定义和方法 (包含ES5新增数组方法)

    数组Array 1. 数组定义 一系列数据的集合成为数组.数组的元素可以为任何类型的数据(包括数组,函数等),每个元素之间用逗号隔开,数组格式:[1,2,3]. 2. 数组创建方式 (1) 字面量方法 ...

  5. CentOS6安装各种大数据软件 第一章：各个软件版本介绍

    相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...

  6. 1.Hadoop集群安装部署

    Hadoop集群安装部署 1.介绍 (1)架构模型 (2)使用工具 VMWARE cenos7 Xshell Xftp jdk-8u91-linux-x64.rpm hadoop-2.7.3.tar. ...

  7. 一起来学大数据——走进Linux之门，学习大数据的重中之重

    昨天我们看了有关大数据Hadoop的一些知识点,但是要在学习大数据之前,我们还是要为大数据的环境做一些的部署. 那么,今天我们就来讲讲开启我们大数据之路的Linux,跟上我们的脚步yo~ Linux介 ...

  8. 【JVM】TroubleShooting之内存溢出异常(OOM)与调优

    1. OOM概述 If your application's execution time becomes longer and longer, or if the operating system ...

  9. php中的Register Globals

    参考: http://php.net/manual/zh/security.globals.php

  10. Linux内核程序的编译：模块化编译

    内核在编译的时候,可以支持单独模块化编译,只需要一个小小的Makefile即可搞定. 步骤如下: 1.在任意位置创建目录 vim Makefile 2.在Makefile中添加如下代码(我的kerne ...