[CreateJS] サウンド (6) ~boombox, loop(native)~

CreateJSを使って、サウンドを学習するよ。 :bouzu:
単に、再生させるだけだがな! :piyo:

サウンド周りだけ、boombox を使ってみた。

createjs_sound_boombox_loop_native

サウンドは、claps.mp3, claps.ogg, claps.aac / bgm.mp3, bgm.ogg, bgm.aac を用意した。
サウンドの終了で、拍手ボタンを復帰させてるよ。 :girl:
別ウィンドウや別タブを触ってから、もどってきたときの挙動にも注目!

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sound [boombox] (loop: native) | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>
<script src="js/boombox.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/button.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:600px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var piyo;
var clapsBtn;
var loaded = 0;

function init() {
  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = "fixed";
  stats.domElement.style.right = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);

  canvas = document.getElementById("canvas");

  stage = new createjs.Stage(canvas);

  background();

  piyo = new lib.Piyo();
  stage.addChild(piyo);
  piyo.scaleX = piyo.scaleY = 2;
  piyo.x = canvas.width/2;
  piyo.y = 350;
  piyo.mouseEnabled = false;

  clapsBtn = new lib.ClapsButton();
  stage.addChild(clapsBtn);
  clapsBtn.scaleX = clapsBtn.scaleY = 2;
  clapsBtn.x = canvas.width/2;
  clapsBtn.y = 420;
  clapsBtn.addEventListener("click", claps);
  clapsBtn.enabled();

  boombox.setup({
    htmlaudio: {use: true},
    htmlvideo: {use: true},
    webaudio: {use: false}
  });
  var bgm = {
    src: [
      {media: "audio/mpeg", path: "assets/bgm.mp3"},
      {media: "audio/ogg", path: "assets/bgm.ogg"},
      {media: "audio/mp4", path: "assets/bgm.aac"}
    ]
  };
  var sounds = {
    src: [
      {media: "audio/mpeg", path: "assets/claps.mp3"},
      {media: "audio/ogg", path: "assets/claps.ogg"},
      {media: "audio/mp4", path: "assets/claps.aac"}
    ]
  };
  boombox.load("bgm", bgm, soundload);
  boombox.load("claps", sounds, soundload);
  boombox.onBlur = blur;
  boombox.onFocus = focus;

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.enableMouseOver(10);
  stage.update();
}
function soundload() {
  loaded ++;
  if (loaded > 1) {
    initialize();    
  }
}
function initialize() {
  boombox.get("bgm").volume(0.3);
  boombox.get("bgm").setLoop(boombox.LOOP_NATIVE);
  boombox.get("bgm").play();

  createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
  piyo.update();
  stage.update();

  stats.update();
}
function claps(event) {
  boombox.get("claps").onEnded = soundcomplete;
  boombox.get("claps").volume(0.3);
  boombox.get("claps").play();

  piyo.addEventListener("jumped", jumped);
  piyo.jump();

  clapsBtn.selected();
}
function soundcomplete(event) {
  clapsBtn.enabled();
}
function focus(event) {
  boombox.get("bgm").pause();
  clear();
}
function focus(event) {
  boombox.get("bgm").resume();
  clear();
}
function clear() {
  boombox.get("claps").stop();

  clapsBtn.enabled();
}
function jumped(event) {
  piyo.removeEventListener("jumped", jumped);

  //clapsBtn.enabled();
}
function background() {
  var sky = new createjs.Shape();
  stage.addChild(sky);
  sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 300);
  sky.graphics.drawRect(0, 0, 600, 300);

  var ground = new createjs.Shape();
  stage.addChild(ground);
  ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 300, 0, 150);
  ground.graphics.drawRect(0, 300, 600, 150);

  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Myriad Pro", "#FFFFFF");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var title = new createjs.Text("Sound", "24px Myriad Pro", "#FFFFFF");
  stage.addChild(title);
  title.textAlign = "center";
  title.textBaseline = "bottom";
  title.x = canvas.width/2;
  title.y = 65;
  title.alpha = 0.6;
  var subtitle = new createjs.Text("[boombox]\n(loop: native)", "20px Myriad Pro", "#FFFFFF");
  stage.addChild(subtitle);
  subtitle.textAlign = "center";
  subtitle.textBaseline = "bottom";
  subtitle.x = canvas.width/2;
  subtitle.y = 110;
  subtitle.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#FFFFFF");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "bottom";
  publish.x = canvas.width - 10;
  publish.y = 20;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <canvas id="canvas" width="600" height="450" style="background-color:#FFFFFF"></canvas>
</body>
</html>


[修正] (15/09/21 Mon 00:41)
CreateJS 0.8.1 にバージョンアップ。