読者です 読者をやめる 読者になる 読者になる

Web + Life Hack

〜True But Useless〜

【Web Music】【API】【ハッカソン】googleでWeb Audio APIを使ったハッカソンとプレゼンしてきた。

今回は初とも言えるWeb Audioに関するハッカソンに参加してきました。

10/19 に Web Music ハッカソンを開催します

主催 : Web Music Developers JP、Google
協賛 : AMEI (一般社団法人 音楽電子事業協会)

http://googledevjp.blogspot.jp/2013/09/1019-web-music.html




参加した目的としては以下の通りです。

  • 今まで入ったことないgoogleに入れるチャンス
  • web Audio APIをどんなものか触ってみたい
  • web MIDI専門家のwebアプリがどんなものか見てみたい


http://instagram.com/p/fpO8zawYnY/
Instagram


全くのweb Audio API未経験ながらメンターの方の手厚いフォローのお陰でいくつか
のwebアプリを作ることが出来ました。

webアプリ1:ドレミファテスト

心理テストなんですがその回答にドレミの音がなるようにしました。
今回は心理テストですが色々応用出来そうです。

<!DOCTYPE html chac>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

</head>
<body>
<h1>ドレミファテスト</h1>

<form>
    <div id="psycho_question">
        <p>[Q1] 子供時代、あなたがよくしていた遊びは?</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu01" value="b" class="radio" onclick="Play(1)">外で野球やかくれんぼなど</label>
            <label class="radiorabel"><input type="radio" name="qu01" value="h" class="radio" onclick="Play(1)">外で昆虫採集など</label>
            <label class="radiorabel"><input type="radio" name="qu01" value="a" class="radio" onclick="Play(1)">家でお絵かき、おままごとなど</label>
            <label class="radiorabel"><input type="radio" name="qu01" value="c" class="radio" onclick="Play(1)">友達と一緒にいろんなことを</label>
        </div><!--/choice-->
    </div>

    <div id="psycho_question">
        <p>[Q2] あなたはインドア派? アウトドア派?</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu02" value="h" class="radio" onclick="Play(2)">超アウトドア</label>
            <label class="radiorabel"><input type="radio" name="qu02" value="b" class="radio" onclick="Play(2)">どちらかというとアウトドア</label>
            <label class="radiorabel"><input type="radio" name="qu02" value="f" class="radio" onclick="Play(2)">どちらかというとインドア</label>
            <label class="radiorabel"><input type="radio" name="qu02" value="g" class="radio" onclick="Play(2)">超インドア</label>
        </div><!--/choice-->
    </div>

    <div id="psycho_question">
        <p>[Q3] あなたが憧れるのはどんな人物?</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu03" value="e" class="radio" onclick="Play(3)">世界で活躍するスポーツ選手など</label>
            <label class="radiorabel"><input type="radio" name="qu03" value="d" class="radio" onclick="Play(3)">自分の実力で大金を稼ぎだす経営者</label>
            <label class="radiorabel"><input type="radio" name="qu03" value="a" class="radio" onclick="Play(3)">知的で頭のいい文化人</label>
            <label class="radiorabel"><input type="radio" name="qu03" value="c" class="radio" onclick="Play(3)">やさしくて誰からも好かれている人</label>
        </div><!--/choice-->
    </div>

    <div id="psycho_question">
        <p>[Q4] 長距離走の途中、腹痛に見舞われました。どうする?</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu04" value="f" class="radio" onclick="Play(4)">棄権する</label>
            <label class="radiorabel"><input type="radio" name="qu04" value="c" class="radio" onclick="Play(4)">とりあえず休む</label>
            <label class="radiorabel"><input type="radio" name="qu04" value="h" class="radio" onclick="Play(4)">自分を騙し騙し走りつづける</label>
            <label class="radiorabel"><input type="radio" name="qu04" value="e" class="radio" onclick="Play(4)">気合だけで最後まで走りぬく</label>
        </div><!--/choice-->
    </div>

    <div id="psycho_question">
        <p>[Q5] 次のうち、どれなら耐えられそう?</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu05" value="f" class="radio" onclick="Play(5)">1か月間、金がない</label>
            <label class="radiorabel"><input type="radio" name="qu05" value="b" class="radio" onclick="Play(5)">1か月間、野宿する</label>
            <label class="radiorabel"><input type="radio" name="qu05" value="g" class="radio" onclick="Play(5)">1か月間、誰とも喋らない</label>
            <label class="radiorabel"><input type="radio" name="qu05" value="d" class="radio" onclick="Play(5)">1か月間、ごはんにおかずがない</label>
        </div><!--/choice-->
    </div>

    <div id="psycho_question">
        <p>[Q6] あなたにとって大切なものは</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu06" value="d" class="radio" onclick="Play(6)">お金</label>
            <label class="radiorabel"><input type="radio" name="qu06" value="g" class="radio" onclick="Play(6)">時間</label>
            <label class="radiorabel"><input type="radio" name="qu06" value="e" class="radio" onclick="Play(6)">愛</label>
            <label class="radiorabel"><input type="radio" name="qu06" value="a" class="radio" onclick="Play(6)">目的</label>
        </div><!--/choice-->
    </div>

    <div id="psycho_question">
        <p>[Q7] 遠方の親戚が危篤に陥りました。さて、どうする?</p>
        <div class="choice">
            <label class="radiorabel"><input type="radio" name="qu07" value="g" class="radio" onclick="Play(7)">とりあえず連絡を待つ</label>
            <label class="radiorabel"><input type="radio" name="qu07" value="e" class="radio" onclick="Play(7)">とりあえず他の親戚に様子を聞く</label>
            <label class="radiorabel"><input type="radio" name="qu07" value="d" class="radio" onclick="Play(7)">とりあえず駆けつける</label>
            <label class="radiorabel"><input type="radio" name="qu07" value="f" class="radio" onclick="Play(7)">何もしない</label>
        </div><!--/choice-->
    </div>
      <br>

</form>
<button type="submit" onclick="Play(8)" href='/webapp_end.html'> 送信 </button><br/>

<script type="text/javascript" src="/docs/waapisim/waapisim.js"></script>
<script type="text/javascript">

    if(typeof(webkitAudioContext)!=="undefined")
        var audioctx = new webkitAudioContext();
    else if(typeof(AudioContext)!=="undefined")
        var audioctx = new AudioContext();

    //var osc = audioctx.createOscillator();
    //osc.connect(audioctx.destination);

    function Play(i) {

        var osc = audioctx.createOscillator();
        osc.connect(audioctx.destination);
        //デフォルトの波形を変える設定
        osc.type = "sawtooth";

        //デフォルトの周波数を変える設定
        switch (i) {
            //ドの音
            case 1:
                osc.frequency.value = 523.251131;
                break;
            //レの音
            case 2:
                osc.frequency.value = 587.329536;
                break;
            //ミの音
            case 3:
                osc.frequency.value = 659.255114;
                break;
            //ファの音
            case 4:
                osc.frequency.value = 698.456463;
                break;
            //ソの音
            case 5:
                osc.frequency.value = 783.990872;
                break;
            //ラの音
            case 6:
                osc.frequency.value = 880.000000;
                break;
            //シの音
            //1オクターブ低かったから*2
            case 7:
                osc.frequency.value = 493.883301*2;
                break;
            //ドの音
            //1オクターブ低かったから*2
            case 8:
                osc.frequency.value = 523.251131*2;
                break;


        }


        osc.start(0);

        setTimeout(function() {
            osc.stop(0);
        },1000);
    }

</script>
</body>
</html>

webアプリ2:ひたすら入力ドラム

文字入力で5,10,15といった5で割り切れる入力数では拳銃の音を、
それ以外はドラムの音が流れます。
これをgoogle chromeのプラグインに出来ればメールも楽しくなる。。。はず。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body>
<h1>ひたすら入力ドラム</h1>
<textarea cols="90" rows="30" onkeyup="Play(value.length)"></textarea>


<script type="text/javascript">

    if(typeof(webkitAudioContext)!=="undefined")
        var audioctx = new webkitAudioContext();
    else if(typeof(AudioContext)!=="undefined")
        var audioctx = new AudioContext();

    var buffer = null;
    var files = [
        "SNARE_2.WAV",
        "SNARE_1.WAV"
    ];
    var buffers = [];
    var loadidx = 0;
    var req = new XMLHttpRequest();
    LoadBuffers();

    //LoadSample(audioctx, "./SNARE_1.WAV");
    //LoadSample(audioctx, "./SNARE_2.WAV");

    function Play(value) {
        console.log(value);
        if(value%5 == 0){
            var src = audioctx.createBufferSource();
            src.buffer = buffers[0];
            src.connect(audioctx.destination);

        }else{
            var src = audioctx.createBufferSource();
            src.buffer = buffers[1];
            src.connect(audioctx.destination);

        }
        src.start(0);
    }

    function LoadSample(ctx, url) {
        var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "arraybuffer";
        req.onload = function() {
            if(req.response) {
//          buffer = ctx.createBuffer(req.response, false);
                ctx.decodeAudioData(req.response,function(b){buffer=b;},function(){});
            }
            else
                buffer = ctx.createBuffer(VBArray(req.responseBody).toArray(), false);
        }
        req.send();
    }

    function LoadBuffers() {
        req.open("GET", files[loadidx], true);
        req.responseType = "arraybuffer";
        req.onload = function() {
            console.log(req.response);
            if(req.response) {
                audioctx.decodeAudioData(req.response,function(b){
                    buffers[loadidx]=b;
                    if(++loadidx < files.length)
                        LoadBuffers();
                },function(){});
            }
            else
                buffers[loadidx] = audioctx.createBuffer(VBArray(req.responseBody).toArray(), false);
        };
        req.send();
    }


</script>

</body>
</html>

このアプリは以下の注意点が

  • 「WAV」ファイル(拡張子が「.wav」)が二つ必要
  • apacheなどのwebサーバーを起動する必要がある。


プレゼン資料も用意しました。



詳細はGit Hubを見て頂けたら幸いです。
https://github.com/g08m11/webaudio


個人的な写真:
googleからの街並みは壮快だったなー。

http://instagram.com/p/fpO4Q4wYnU/
Instagram
http://instagram.com/p/fpO50UwYnV/
Instagram

広告を非表示にする