songleとthree.jsを使用したpvについて

前提・実現したいこと

three.jsで作成したCGと音楽サイトのsongleをhtml上で同時に表示させたい。

three.jsで作成したCGをsongleを使用して音楽と一緒に動かし、
html上で表示されるpvのようなものを作りたいです。
しかし、CGとsongleを埋め込んだものが同時に表示されません。
ソースは多分合っていると思うので環境の問題か…とも思ったのですが、
必要なものは全部入っているはずなのです…。

javascript、及びプログラミング初心者です。
なにが問題なのか指摘して頂けると有り難いです。
よろしくお願いします。

発生している問題・エラーメッセージ

three.jsで作成したCGが画面上に表示されず、songleのみが表示されている

エラーメッセージ

なし（恐らく環境が問題なのかと…。）

該当のソースコード

html
1<!DOCTYPE html![イメージ説明](3c92f0c0afed365922ae1ab3db991c2c.jpeg)>
2<html lang="ja">
3	<head>
4		<meta charset="utf8">
5		<title>ページのタイトル</title>
6	</head>
7	<body>
8		<script src="three.min.js"></script>
9		<script src="TrackballControls.js"></script>
10		<script src="https://widget.songle.jp/v1/api.js"></script>
11		<script src="test13cg-mus.js"></script>
12	</body>
13</html>

javascript
1window.onload = load_songle; // 画面読み込み完了時のイベントハンドラ
2window.onSongleWidgetReady = ready;
3
4function load_songle() { // イベントハンドラ（load_songle）
5  var songleWidgetElement =  // SongleWidget要素を作成
6  SongleWidgetAPI.createSongleWidgetElement( {
7    api: "songle-widget-api-example",  // API属性に任意の文字列を設定
8    url: "www.youtube.com/watch?v=4DErKwi9HqM" } );  // 楽曲のURL
9    document.body.appendChild(songleWidgetElement); // DOM要素を追加
10}
11
12function ready(apiKey,songleWidget){
13  songleWidget.on("chordPlay", function(event){
14    console.log(event.chord.name);
15    if(event.chord.name === "C#"){
16      
17       function draw_cg(){ // イベントハンドラ（関数）
18      //
19         var scene = new THREE.Scene();  // シーンの作成
20      //
21         var aspect = window.innerWidth / window.innerHeight; // aspect比
22         var camera = new THREE.PerspectiveCamera( 80, aspect, 1, 1000 ); // camera
23         camera.position.set(0,0,30); // カメラを設置
24      //
25         var cubeGeo = new THREE.BoxGeometry(8, 8, 8); // 立方体ジオメトリ
26         var cubeMat = new THREE.MeshBasicMaterial({color:0xFF0000}); // Material
27         var cube = new THREE.Mesh(cubeGeo, cubeMat); // 立方体メッシュの作成
28         cube.position.set(0,0,0); // 立方体を設置
29         scene.add(cube); // シーンに立方体を追加
30      //
31         var renderer = new THREE.WebGLRenderer();  // レンダラーの作成
32         renderer.setClearColor(new THREE.Color(0xEEEEEE));  // 背景色の設定
33         renderer.setSize(window.innerWidth, window.innerHeight); // サイズ設定
34         document.body.appendChild(renderer.domElement); // DOM要素を追加
35         renderer.render(scene, camera); // シーンのレンダリング
36       }
37    }
38  });
39}
40