자바 스크립트로 음성 및 조명 조작

13278 단어 Hue자바스크립트milkcocoaNode.jsp5.js
자바 스크립트로 조명 조작 [Cylon.js x Philips Hue] 의 계속입니다.

덧붙여서 이 근처의 데모를 다음 IoTLT 로 할 예정입니다. (모두 와줘!)


ブラウザで音声を受けて -> Milkcocoa -> Cylon.js -> Hueを操作 라고 흐름을 해 보고 싶습니다. 역시 Milkcocoa 사용하면 연결이 매우 편합니다.

WebAudio는 p5.js를 통해 사용해보십시오.

p5.js is 무엇



htp // p5js. rg/
시각화 등이 쉽게 할 수있는 JS 라이브러리입니다. 이 라이브러리는 아트계의 사람이 자주 사용하고 있는 이미지입니다.

참고 : p5.js에서 Processing처럼 풍부한 웹 표현을 만드는 자습서

글로벌 오염 등이 있기 때문에 다른 라이브러리와 공존시킬 경우 조심하는 것이 좋을지도.
그렇다고 해도 멋지게 사용할 수 있으므로 편리합니다.

p5.js로 소리 인식



내부적으로 WebAudio를 사용해 랩 해 주는 샘플입니다.

샘플이 가득있는 것이 좋습니다.

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.7/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.7/addons/p5.sound-min.js"></script>
    <script src="p5-audio.js"></script>
  </head>
  <body>

  </body>
</html>

p5-audio.js
var input;
var analyzer;

function setup() {
  createCanvas(710, 200);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  background(200);

  // Get the overall volume (between 0 and 1.0)
  var vol = mic.getLevel();

  fill(127);
  stroke(0);

  // Draw an ellipse with height based on volume
  var h = map(vol, 0, 1, height, 0);
  ellipse(width/2, h - 25, 50, 50);
}

실행하면 이런 느낌으로 목소리와 소리에 연동하여 원이 상하합니다.
큰 소리를 내면 위로 점프하는 느낌이군요.


var vol = mic.getLevel(); 의 부분의 vol이 음량이 들어오므로 그대로 사용할 수 있을 것 같습니다.

p5.js에 Milkcocoa를 연결



Milkcocoa 라이브러리를 로드합니다.

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.7/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.7/addons/p5.sound-min.js"></script>
    <script src="p5test.js"></script>
  </head>
  <body>

  </body>
</html>

코멘트는 추기한 부분만 했습니다.

p5-sound.html
var input;
var analyzer;
var milkcocoa = new MilkCocoa("{your-app-id}.mlkcca.com"); //追記
var ds = milkcocoa.dataStore('hue'); //追記
var counter = 0; //追記

function setup() {
  createCanvas(710, 200);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(200);
  var vol = mic.getLevel();
  fill(127);
  stroke(0);
  var h = map(vol, 0, 1, height, 0);
  ellipse(width/2, h - 25, 50, 50);
  //以下5行追記
  counter++;
  if (counter % 30 === 0){//Milkcocoa側の負担を考えて間引き
    console.log(counter);
    ds.send({vol:vol});
  }
}

p5.js에서 무언가를 만들 때 background ()의 행동으로 빠져있었습니다. 에서 draw() 라는 거동의 이야기를 한 것 같지 않은 것 같다.
우선 draw() 의 안은 반복해 불려 가는 (requestanimationframe일까?) 때문에 vol 의 값(음량)도 반복해 갱신됩니다.

그래서 ds.send({vol:vol}); 로 볼륨의 정보를 Milkcocoa에 보냅니다.

여기에서 Cylon.js (Node.js) 쪽



이전 ( 자바 스크립트로 조명 조작 [Cylon.js x Philips Hue] )과 마찬가지로 Milkcocoa에서받은 데이터를 기반으로 Hue를 조작합니다. 이번에는 볼륨에 따라 밝게 해 봅시다.

참고 : htps : // 기주 b. 이 m / hyb 리 dg 납 p / cy ぉ ふ / b b b js

참고 : htps : // 기주 b. 이 m / hyb 리 dg 납 p / cy ぉ ふ / b b b js#L132-L142

이 Cylon-hue의 라이브러리를 보면, brightness 라는 메소드가 있어 0~100으로 밝기를 제어할 수 있는 것 같습니다. p5.js측으로부터 보내지는 vol의 값은 0~1의 사이인 것 같기 때문에, 조정해 100배로 하고 있습니다.

hue-sound.js
var Cylon = require('cylon');
var Milkcocoa = require('milkcocoa');
var milkcocoa = new Milkcocoa("{your-app-id}.mlkcca.com");
var ds = milkcocoa.dataStore('hue');
var hue;

Cylon.robot({
  connections: {
    hue: { adaptor: 'hue', host: '192.168.2.2', username: 'newdeveloper' }
  },

  devices: {
    bulb: { driver: 'hue-light', lightId: 1 }
  },

  work: function(my) {
    my.bulb.turnOn();
    hue = my;
  }
}).start();

ds.on('send',function(data){
  var level = data.value.vol * 100; //ここの数値はその場のうるささ?などで変えた方がいいかも
  console.log(level);
  hue.bulb.brightness(level);
});

실행해 보면 이런 느낌.

동영상도 있습니다. h tps://오. gl / p s / s DftwcfdM1z b19M6

요약



WebAudio의 기능을 브라우저 측에서 사용해도, JS 경유로 바삭하게 Hue와 연결될 수 있네요.

Node.js로 WebAudio의 인터페이스 구현하고 있다 Node Web Audio API 가 있는 것 같기 때문에, 같은 일을 할 수 없는지 모색중입니다.
p5.js에서 무언가를 만들 때 background ()의 행동으로 빠져있었습니다.
p5.js 리사주 도형

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage