PC内で流れる音源の音声データをJSで取得する方法を教えてください！

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);