Web Audio APIで 楽曲解剖アプリつくってみた

2015.02.25

Saito Keisei

Who is me

Saito Keisei

keisei_1092

keisei1092

東京電機大学 未来科学部 情報メディア学科 学部3年 (2016卒) 興味 - ソーシャルネットワーキングサービス - Consumer Generated Media - センシング - ピザ つかうもの - Java Objective-C Ruby HTMLCSSJS - Arduino Raspberry Pi 創作活動 - 全世界で10万回再生＆同人CD2枚頒布 - Xperiaに着信音提供

Kasumigaura, Ibaraki

2

Works

Saito Keisei

keisei_1092

keisei1092

『らぼログ』 設計、フロントエンド - 研究室配属の問題にアプローチ - 食べログにインスパイアされて制作 『trackreferrer』 - 楽曲を解剖し”見える”化に貢献 - Web Audio APIの練習 『departureboard』 - 駅の発車標をCSSとJSだけでパクる - フロントエンドデザインで遊んだ 『Vocaloid Collaborative Filtering』 - Twitterとボカロ動画で協調Filtering - Webアプリ化を目指したい ほか miraitoarumachi.com/portfolio

Kasumigaura, Ibaraki

3

Works

Saito Keisei

keisei_1092

keisei1092

『らぼログ』 - 研究室配属の問題にアプローチ - 食べログにインスパイアされて制作 『trackreferrer』 - 楽曲を解剖し”見える”化に貢献 - Web Audio APIの練習 『departureboard』 - 駅の発車標をCSSとJSだけでパクる - フロントエンドデザインで遊んだ 『Vocaloid Collaborative Filtering』 - Twitterとボカロ動画で協調Filtering - Webアプリ化を目指したい ほか miraitoarumachi.com/portfolio

Kasumigaura, Ibaraki

4

クリエイター支援がしたい

Web上で楽曲を解剖して “作り方に気づく”サービス

「ネットクリエイター」の増加 ↓

ネットクリエイターになりたい 人の増加

5

楽曲解剖アプリ 6

Web Audio APIをつかう 7HTML5オーディオ - Wikipedia http://ja.wikipedia.org/wiki/HTML5オーディオ#Web_Audio_API_.E3.81.A8_MediaStream_Processing_API “Web Audio API は W3C によって開発されている、ウェブアプリケーション用の音声処理と音声合成のための高レベル JavaScript API。”

Web Audio APIをつかう 8HTML5オーディオ - Wikipedia http://ja.wikipedia.org/wiki/HTML5オーディオ#Web_Audio_API_.E3.81.A8_MediaStream_Processing_API “Web Audio API は W3C によって開発されている、ウェブアプリケーション用の音声処理と音声合成のための高レベル JavaScript API。”

ブラウザ上でのサウンドの生成と 再生をブラウザの機能で提供

forループで 9How to start multiple audio simultaneously? - stackoverflow http://stackoverflow.com/questions/10377237/how-to-start-multiple-audio-tags-simultaneously

function StartPlayingAll() { for (var i = 0; i < audios.length; i++) audios[i].play(); } }

forループで 10How to start multiple audio simultaneously? - stackoverflow http://stackoverflow.com/questions/10377237/how-to-start-multiple-audio-tags-simultaneously

function StartPlayingAll() { for (var i = 0; i < audios.length; i++) audios[i].play(); } }

開始タイミングがズレた

Tutorialに従ってみた 11Web Audio APIの基礎 - HTML5 Rocks http://www.html5rocks.com/ja/tutorials/webaudio/intro/#toc-abstract

function finishedLoading(bufferList) { // Create two sources and play them both together. var source1 = context.createBufferSource(); var source2 = context.createBufferSource(); source1.buffer = bufferList[0]; source2.buffer = bufferList[1];

source1.connect(context.destination); source2.connect(context.destination); source1.noteOn(0); source2.noteOn(0); }

音量の変更 12

// Create a gain node. var gainNode = context.createGain(); // Connect the source to the gain node. source.connect(gainNode); // Connect the gain node to the destination. gainNode.connect(context.destination); // Reduce the volume. gainNode.gain.value = 0.0;

音量を０にしたり１にしたりすることでミュート／ミュート解除

デモ 13

http://miraitoarumachi.com/trackreferrer/index.html

これからの展望 14Webサービス化

・楽器ごとのファイルと情報をアップロードしてもらうだけで 　閲覧者に使ってもらえるように ・シェア機能、ありがとう！ボタンなど実装したい ・UIをどうにかする