胆小的俾格米小人儿！

在线demo

Dome在这 因为兼容性的问题还没解决！

建议Chrome打开，建议Chrome打开，建议Chrome打开。

灵感来源

某天在观看TED演讲Aparna Rao High tech Art with a sense of humor的时候看到里面的一个项目叫作pygmies，中文名叫俾格米人（图中的小黑人）。他们都很胆小，只要有声音就会被吓到躲到板子后面。

该项目的实物是由来自印度的团队制做的。测试中，俾格米人表现得唯妙唯肖，就像是一群好奇而又胆小的小动物。十分可爱!

因而我想用web技术彷佛也能达到一样的效果。只须要浏览器调用麦克风，获取数据，做用于svg元素(固然这是最初的简单想法)。

准备svg素材

做图工具,Mac平台sketch

主要代码

html部分

// 主要是svg代码，量比较大，请在源码中查看
复制代码

css部分

// 主要是基本的定位代码，请在源码中查看
复制代码

js部分

"use strict";

var ctx, analyser, frequencies, getByteFrequencyDataAverage, draw;

// 兼容性
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// 获取音频上下文
ctx = new window.AudioContext();

// 用户获取stream当中的时间、频率信息
analyser = ctx.createAnalyser();
frequencies = new Uint8Array(analyser.frequencyBinCount);
getByteFrequencyDataAverage = function() {
  // 将当前频域数据拷贝进数组
  analyser.getByteFrequencyData(frequencies);
  // 求得频域的平均值
  return (
    frequencies.reduce(function(previous, current) {
      return previous + current;
    }) / analyser.frequencyBinCount
  );
};

// 返回 Promise 对象
navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then(function(stream) {
    // window.hackForMozzila = stream;
    ctx
      .createMediaStreamSource(stream)
      // 链接到AnalyserNode
      .connect(analyser);
  })
  .catch(function(err) {
    console.log(err.message);
  });

var pygmies = [];
for (let i = 0; i < 10; i++) {
  pygmies.push(document.getElementById(`pygmie-${i + 1}`));
}

// 改变小人的位置
(draw = function() {
  var moveValue = getByteFrequencyDataAverage() * 10;
  if (moveValue >= 35) {
    moveValue = 35;
  }
  pygmies[0].style.transform = `translate(51.000000px, ${moveValue}px)`;
  console.log(getByteFrequencyDataAverage());
  pygmies[1].style.transform = `translate(89.000000px, ${0.0 + moveValue}px)`;
  pygmies[2].style.transform = `translate(149.000000px, ${0.0 + moveValue}px)`;
  pygmies[3].style.transform = `translate(218.000000px, ${0.0 + moveValue}px)`;
  pygmies[4].style.transform = `translate(286.500000px, 51.000000px) rotate(90.000000deg) translate(-286.500000px, -51.000000px) translate(275.000000px, ${34.0 +
    moveValue}px)`;
  pygmies[5].style.transform = `translate(286.500000px, 152.000000px) rotate(90.000000deg) translate(-286.500000px, -152.000000px) translate(275.000000px, ${135.5 +
    moveValue}px)`;
  pygmies[6].style.transform = `translate(286.500000px, 196.5000000px) rotate(90.000000deg) translate(-286.500000px, -196.500000px) translate(275.000000px, ${179.5 +
    moveValue}px)`;
  pygmies[7].style.transform = `translate(17.500000px, 173.500000px) rotate(-90.000000deg) translate(-17.00000px, -173.500000px) translate(5.500000px, ${156.5 +
    moveValue}px)`;
  pygmies[8].style.transform = `translate(17.000000px, 106.500000px) rotate(-90.000000deg) translate(-17.00000px, -106.500000px) translate(5.500000px, ${89.5 +
    moveValue}px)`;
  pygmies[9].style.transform = `translate(17.00000px, 252.500000px) rotate(-90.000000deg) translate(-17.00000px, -252.500000px) translate(5.500000px, ${235.5 +
    moveValue}px)`;
  requestAnimationFrame(draw);
})();

复制代码

代码主要是作了两件事：

• 获取麦克风的音频信息
• 利用音频信息改变svg的位置信息

只不过须要不断的循环，来获取最新的信息。

待优化部分

• 手动的修改每一个俾格米人的位置真的很烦人；
• 经过修改transform参数来调节俾格米人的位置，很容易出错；
• 当俾格米人数量再多一点儿的时候，svg可能有性能缺陷；
• 俾格米人并不惟妙惟俏，离原版的生动程度还差很远； 这一部分须要去考虑生物的应激性特征、分不一样状况、动画曲线等方面。达到赋予每一个俾格米人不一样的性格特征的效果（有的胆小，有的胆大，有的好奇心强等等）。
• 兼容性问题；
• ...

参考

TED

Web Audio API

画随音动！Web Audio API 入门