BCU30 - Webでできるマルチメディア表現

DEMO1：https://youtu.be/L14tUQe7MWM
DEMO2：https://youtu.be/yH-JNIVVCME
DEMO3：https://youtu.be/5wdT8o6n3Os

Battle Conference U30
http://bcu30.jp/

Transcript

8. const context = new window.AudioContext(); const sourceNode = context.createMediaElementSource(); const gainNode = context.createGain(); const biquadFilterNode = context.createBiquadFilter(); const analyserNode = context.createAnalyser(); TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF
9. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF sourceNode.connect( gainNode );
10. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF sourceNode.connect( gainNode ); gainNode.connect( biquadFilterNode );
11. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF sourceNode.connect( gainNode ); gainNode.connect( biquadFilterNode ); biquadFilterNode.connect( analyserNode );
12. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF sourceNode.connect( gainNode ); gainNode.connect( biquadFilterNode ); biquadFilterNode.connect( analyserNode ); analyserNode.connect( context.destination );
13. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF sourceNode.connect( gainNode ); gainNode.connect( biquadFilterNode ); biquadFilterNode.connect( analyserNode ); analyserNode.connect( context.destination );
14. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF <audio>
15. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF ⾳量を調節 GainNode.gain.value = 0.8; <audio>
16. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF ⾳量を調節 GainNode.gain.value = 0.8; BiquadFilterNode.type = "lowpass”; BiquadFilterNode.frequency.value = 22050; エフェクト <audio>
17. TPVSDF /PEF HBJO /PEF CJRVBE 'JMUFS /PEF BOBMZTFS /PEF ⾳量を調節 GainNode.gain.value = 0.8; BiquadFilterNode.type = "lowpass”; BiquadFilterNode.frequency.value = 22050; エフェクト <audio>
18. MIDIコントローラ キーボードとか MIDIメッセージ MIDI機能を有した機器とJavaScriptを接続できる
21. navigator.requestMIDIAccess({ sysex: true }).then( onMIDISuccess, onMIDIFailure ); const onMIDISuccess = ( midi ) => { midi.inputs.onmidimessage = onMIDIMessage; } const onMIDIMessage = ( event ) => { console.log( event.data ); } MIDIコントローラ キーボードとか MIDIメッセージ Web event.data
23. const scene = new THREE.Scene();
24. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
25. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); const light = new THREE.DirectionalLight( 0xffffff );
28. navigator.serviceWorker.register( ʻservice-worker.jsʼ );