WebRTCやWebAudioなどを使って、PC内で流れる音声を取得しようとしているのですが、方法が分かりません。。。
具体的に言うと、
Youtubeで流れる音を波形データとして取得し、
その音声の波長データを使って3Dの物体生成する、
というのをやっております。
ちなみに近い完成イメージでいうと、今試しているのは、
WebRTCのnavigator.getUserMediaよりPC内臓のマイクの音を拾ってきて、
その波形データを使って3D表現するというのをやっております。
(Youtubeで流したものをわざわざマイクから拾うという、すごく遠回りな方法です。。。)
javascript
/* * PCのマイクから音をひろってくる */ var getUserMedia = navigator.getUserMedia ? 'getUserMedia' : navigator.webkitGetUserMedia ? 'webkitGetUserMedia' : navigator.mozGetUserMedia ? 'mozGetUserMedia' : navigator.msGetUserMedia ? 'msGetUserMedia' : undefined; var astream, micsrc; var conditions={audio:true, video:false}; const Mic = () => { navigator[getUserMedia]( conditions, (stream) => { astream=stream; micsrc=audioctx.createMediaStreamSource(stream); micsrc.connect(audioctx.destination); micsrc.connect(analyser); }, (e) => { console.error(e); } ); } //Mic集音開始 Mic(); /* * 音声ファイルデータを使用して3Dオブジェクトを生成 */ var audioctx = new AudioContext(); var timerId; var analyser = audioctx.createAnalyser(); analyser.fftSize = 128; analyser.minDecibels = -100; analyser.maxDecibels = -30; var obj; const DrawGraph = () => { var data = new Uint8Array(512); scene.remove(obj); analyser.getByteFrequencyData(data); //Spectrum Dataで取得 //Spectrum Dataの値を使って3Dオブジェクト生成 var geo = new THREE.TorusKnotGeometry( //小数をかけてるのは値を小さくして、3Dオブジェクトのサイズを小さくするため Math.round(data[0] * 2.0), //全体的な大きさ Math.round(data[1] * 0.3), //チューブの太さ Math.round(40), //クネクネの進む方向に対してなん分割するか Math.round(8), //チューブ方向に何分割するか Math.round(data[2] * 0.3), //なんかクネクネ具合が変わる数値その1 Math.round(2) //なんかクネクネ具合が変わる数値その2 ); var mat = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe:true }); obj = new THREE.Mesh( geo, mat); scene.add(obj); requestAnimationFrame(DrawGraph); } timerId=requestAnimationFrame(DrawGraph);
これと同様なことを、PC内で流れる音のみの音声データを拾って、実現したいなと思っているのですが、その方法/調べ方が分からず。。。
丸投げちっくな質問の仕方になってしまい大変恐縮なのですが、ぜひ検索ワードのヒントでもいいので、教えていただけると幸いです...!!
よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう