2013-02-26 15:22:29

License: MIT License

Fork: 4

Fav: 13

View: 7695

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 232 lines
HTML 1 lines
CSS 1 lines

ビジュアライザマグニチュードの変化量で表示(WebAudio API) - tmlib.js 0.1.6
tmlib.js latest

/*
 * constant
 */
var SCREEN_WIDTH    = 465;
var SCREEN_HEIGHT   = 465;
var SCREEN_CENTER_X = SCREEN_WIDTH/2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;

var BAR_NUM    = 400;
var BAR_WIDTH  = 1;
var BAR_SPACE  = 0;
var BAR_HEIGHT = 1;
var BAR_OFFSET = (SCREEN_WIDTH-((BAR_NUM*BAR_WIDTH)+((BAR_NUM-1)*(BAR_SPACE))))/2;

var FFT_SIZE   = 256;

var MAG_NUM = 30;

tm.sound.WebAudio.prototype.play = function(time)
{
    if (time === undefined) time = 0;
    this.source.noteOn(this.context.currentTime + time);
};

tm.sound.WebAudio.prototype.stop = function(time)
{
    if (time === undefined) time = 0;
    this.source.noteOff(this.context.currentTime + time);
    
    var buffer = this.buffer;
    var volume = this.volume;
    var loop   = this.loop;
    
    this.source = this.context.createBufferSource();
    this.source.connect(this.panner);
    this.buffer = buffer;
    this.volume = volume;
    this.loop = loop;
};

tm.sound.WebAudio.prototype.pause =  function() {
    this.source.disconnect();
};

tm.sound.WebAudio.prototype.resume =  function() {
    this.source.connect(this.panner);
};

/*
 * preload
 */
tm.preload(function() {
    tm.sound.WebAudioManager.add("sound", "http://jsrun.it/static/assets/svggirl/01/svg_girl_theme.mp3");
    
    tm.util.ScriptManager.loadDatGUI();
});

/*
 * main
 */
tm.main(function() {
    // canvas インスタンス生成
    var app = tm.app.CanvasApp("#world");
    // リサイズ
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    // 画面フィット
    app.fitWindow();
    // 背景色をセット
    app.background = "rgba(20, 20, 20, 1.0)";
    // メインシーンに切り替え
    app.replaceScene(MainScene());
    // 実行
    app.run();
});

},
    
    play: function() {
        this.webaudio.play();
    },
    
    stop: function() {
        this.webaudio.stop();
    }
});

ビジュアライザマグニチュードの変化量で表示(WebAudio API) - tmlib.js 0.1.6

// forked from omatoro's "ビジュアライザ正確にマグニチュードを計算(WebAudio API) - tmlib.js 0.1.6" http://jsdo.it/omatoro/eAFr // forked from omatoro's "forked: ビジュアライザ(WebAudio API) - tmlib.js 0.1.6" http://jsdo.it/omatoro/t53t // forked from phi's "ビジュアライザ(WebAudio API) - tmlib.js 0.1.6" http://jsdo.it/phi/aJRp // forked from phi's "WebAudio API sample - tmlib.js 0.1.5" http://jsdo.it/phi/qBxI // forked from phi's "template - tmlib.js 0.1.5" http://jsdo.it/phi/vDe6 // forked from phi's "tmlib.js 0.1.4 template" http://jsdo.it/phi/i79A // forked from phi's "tmlib.js 0.1.3 template" http://jsdo.it/phi/w6VG /* * constant */ var SCREEN_WIDTH = 465; var SCREEN_HEIGHT = 465; var SCREEN_CENTER_X = SCREEN_WIDTH/2; var SCREEN_CENTER_Y = SCREEN_HEIGHT/2; var BAR_NUM = 400; var BAR_WIDTH = 1; var BAR_SPACE = 0; var BAR_HEIGHT = 1; var BAR_OFFSET = (SCREEN_WIDTH-((BAR_NUM*BAR_WIDTH)+((BAR_NUM-1)*(BAR_SPACE))))/2; var FFT_SIZE = 256; var MAG_NUM = 30; tm.sound.WebAudio.prototype.play = function(time) { if (time === undefined) time = 0; this.source.noteOn(this.context.currentTime + time); }; tm.sound.WebAudio.prototype.stop = function(time) { if (time === undefined) time = 0; this.source.noteOff(this.context.currentTime + time); var buffer = this.buffer; var volume = this.volume; var loop = this.loop; this.source = this.context.createBufferSource(); this.source.connect(this.panner); this.buffer = buffer; this.volume = volume; this.loop = loop; }; tm.sound.WebAudio.prototype.pause = function() { this.source.disconnect(); }; tm.sound.WebAudio.prototype.resume = function() { this.source.connect(this.panner); }; /* * preload */ tm.preload(function() { tm.sound.WebAudioManager.add("sound", "http://jsrun.it/static/assets/svggirl/01/svg_girl_theme.mp3"); tm.util.ScriptManager.loadDatGUI(); }); /* * main */ tm.main(function() { // canvas インスタンス生成 var app = tm.app.CanvasApp("#world"); // リサイズ app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // 画面フィット app.fitWindow(); // 背景色をセット app.background = "rgba(20, 20, 20, 1.0)"; // メインシーンに切り替え app.replaceScene(MainScene()); // 実行 app.run(); }); var MainScene = tm.createClass({ superClass: tm.app.Scene, init: function() { this.superInit(); var guide = tm.app.RectangleShape(SCREEN_WIDTH, 5, { fillStyle: "rgba(200, 200, 200, 0.5)", strokeStyle: "rgba(0, 0, 0, 0)" }); guide.x = SCREEN_CENTER_X; guide.y = SCREEN_CENTER_Y; this.addChild(guide); this.barGruop = tm.app.CanvasElement().addChildTo(this); for (var i=0; i<BAR_NUM; ++i) { var angle = (360/BAR_NUM)*i; var bar = tm.app.RectangleShape(BAR_WIDTH, BAR_HEIGHT, { fillStyle: "hsla({0}, 100%, 50%, 1.0)".format(angle), strokeStyle: "rgba(0, 0, 0, 0)" }); bar.x = (BAR_WIDTH+BAR_SPACE)*i + BAR_OFFSET; bar.y = SCREEN_CENTER_Y; bar.magnitude = []; for (var j=0; j<MAG_NUM; ++j) { bar.magnitude[j] = 300; } this.barGruop.addChild(bar); } this.webaudio = tm.sound.WebAudioManager.get("sound"); this.webaudio.loop = true; this.webaudio.volume = 0.1; this.webaudio.analyser.fftSize = FFT_SIZE; this.analyzedData = new Uint8Array(this.webaudio.analyser.frequencyBinCount); this.play(); this.gui = new dat.GUI(); this.gui.add(this, 'play'); this.gui.add(this, 'stop'); this.gui.add(this.webaudio, 'pause'); this.gui.add(this.webaudio, 'resume'); this.gui.add(this.webaudio, 'volume', 0.0, 1.0); this.gui.add(this.webaudio.source.playbackRate, 'value', 0.0, 2.0); this.gui.add(this.webaudio, 'loop'); // 変化量を保持 this.magnitude = 0; }, pushMagnitude : function (value, iterator) { for (var i = 0; i < MAG_NUM-1; ++i) { this.barGruop.children[iterator].magnitude[i] = this.barGruop.children[iterator].magnitude[i+1]; } this.barGruop.children[iterator].magnitude[MAG_NUM-1] = value; }, getMagnitude : function (iterator) { return this.barGruop.children[iterator].magnitude[MAG_NUM-1]; }, getMagnitudeAverage : function (iterator) { var result = 0; for (var i = 0; i < MAG_NUM; ++i) { result += this.barGruop.children[iterator].magnitude[i]; } return result / MAG_NUM; }, update: function() { this.webaudio.analyser.getByteFrequencyData(this.analyzedData); var children = this.barGruop.children; var barunit = this.analyzedData.length / children.length; var multiplier = this.webaudio.analyser.frequencyBinCount / this.barGruop.children.length; for (var i=0; i<this.barGruop.children.length; ++i) { var magnitude = 0; var offset = Math.floor(i * multiplier); for (var j=0; j<multiplier; ++j) { magnitude += this.analyzedData[offset+j]; } magnitude /= multiplier; // 変化量を求める var bar = children[i]; var variation = magnitude - this.getMagnitudeAverage(i); if (variation < 0) variation = 0; //variation += magnitude/35; bar.scaleY = variation*3; bar.alpha = variation/120 + 0.2; this.pushMagnitude(magnitude, i); } }, play: function() { this.webaudio.play(); }, stop: function() { this.webaudio.stop(); } }); <canvas id='world'></canvas>body { background-color: #DDDDDD; font: 30px sans-serif; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

omatoro

URL
http://testcording.com/

テストコードをどんどん載せてます。 blog - http://testcording.com/ twitter - https://twitter.com/omatoro

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/qr2L/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

esora_maya:

animation music sound visualizer

PESakaTFM:

This is wonderfully made.

Forked

sort by

ビジュアライザ iPhone用(Safari6) - tml

omatoro

0
0
1243

233/1/1
- art&design
- canvas
- game
- html5
- html5_elements&api
- javascript
- latest
- library&test
- smartphones&tablets
- tmlib.js

forked: ビジュアライザマグニチュードの変化量で表示

thleap

0
0
1542

233/1/1
- art&design
- canvas
- game
- html5
- html5_elements&api
- javascript
- latest
- library&test
- smartphones&tablets
- tmlib.js

forked: ビジュアライザマグニチュードの変化量で表示

stm

0
0
1047

233/1/1
- art&design
- canvas
- game
- html5
- html5_elements&api
- javascript
- latest
- library&test
- smartphones&tablets
- tmlib.js

forked: ビジュアライザマグニチュードの変化量で表示

teetteet

0
0
1324

233/1/1
- art&design
- canvas
- game
- html5
- html5_elements&api
- javascript
- latest
- library&test
- smartphones&tablets
- tmlib.js

ビジュアライザマグニチュードの変化量で表示(WebAudio API) - tmlib.js 0.1.6

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked