Upload
keisei1092
View
313
Download
0
Embed Size (px)
Citation preview
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 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;
音量を0にしたり1にしたりすることでミュート/ミュート解除
デモ 13
http://miraitoarumachi.com/trackreferrer/index.html