最近研究个新玩意，叫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. 浅谈JS作用域和闭包

    函数表达式和函数声明 变量/函数声明都会提前 console.log(a) let a =1 那么打印出来的a为 undefined,因为会将a提到前面并赋予默认值undefined 函数声明:函数声 ...

  2. ImageMagick使用小结

    #查看是否安装imagemagick sudo apt list | grep imagemagick #安装imagemagick sudo apt-get install imagemagick ...

  3. WebGl 利用drawArrays、drawElements画三角形

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. Nginx 解决504 Error 最简单的方法

    <?php // Where am I ? set_time_limit(0); 就这个多,当然了,服务器还是务求稳妥,应当结合服务器和业务需求从配置上优化,才是正理.

  5. PHP代码优化—getter 和 setter

    PHP中要实现类似于Java中的getter和setter有多种方法,比较常用的有: 直接箭头->调用属性(最常用),不管有没有声明这个属性,都可以使用,但会报Notice级别的错误 $dog ...

  6. 我的职业规划(android)

    通过一段时间的想法,自己大概圈定了自己的未来三年的职业规划,关于android的,希望大家多多批评,多多指教.或者大家也能讨论下自己对于未来的期许或者路线,虽然每个人都有自己自身的情况,但是总会有一些 ...

  7. SVN-Tips

    一些实际使用中遇到与学习的SVN的TIPS 1.如何从SVN检出maven项目: 1.从svn导入“作为工作空间中的项目检出”--->Finish 2.如“1”操作后,会自动的在MyEclips ...

  8. 20155222 2016-2017-2 《Java程序设计》第4周学习总结

    20155222 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 子类会继承父类的private成员,但是无法直接存取,必须通过父类提供的方法. 多态就是使用 ...

  9. 20155336虎光元实验四 Android开发基础

    20155336虎光元实验四 Android开发基础 实验内容 1:完成Hello World, 要求修改res目录中的内容,Hello World后要显示自己的学号 2:创建 ThirdActivi ...

  10. python 多线程笔记（4）-- 车站售票模拟

    import threading import time import random class Worker(threading.Thread): '''售票员''' def __init__(se ...