Audio-Visualizer/audioVisualizer.html at master · IainT52/Audio-Visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!doctype html>
<html lang="en">
<head>
	<!-- Meta Tags -->
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

	<title id="pagetitle">Audio Visualizer</title>
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="CSS/audio-visualizer.css"/>
	<script src="https://kit.fontawesome.com/1951006a4b.js" SameSite="None" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body onload="initCanvas_Audio()">
	<!-- Canvas -->
	<div class="canvas-wrap">
		<canvas id="visualizer_render">
		</canvas>
		<!-- Audio Controls -->
		<div class="navControl">
			<div clas="navContainer">
				<div class="form-group">
					<label for="textbox"><a href="https://soundcloud.com/discover" target="_blank"><i class="fab fa-soundcloud soundcloud"></i></a></label>
					<h2>Input Soundcloud track here:</h2>
					<input
						id="user_URL"
						type="textbox"
						class="form-control textbox"
						name="URL"
						value="https://soundcloud.com/mattmaeson/cringe"
						onclick="textboxAuto_Highlight()"
					/>
				</div>
				<div class="middleLine"></div>
				<input  onmouseover="mouseOver = true" onmouseout="mouseOver = false" onclick="sliderTime()" type="range" id="audioSlider"/>
				<div class="controlsContainer">
					<button type="button" class="button" id="toggle" onclick="togglePlay()">
						&#x23f5;
					</button>
					<button type="button" class="button" id="submitButton" onclick="handlePlay_Button()">
						Submit
					</button>
					<h1 id="audioTimer"></h1>
				</div>
			</div>
		</div>
	</div>
	<!-- Logo for circle -->
	<div class="logoFor_Canvas">
		<img id="logo" width="100" height="100" src="MISC/logo.png" alt="">
	</div>
	<!-- Track Info -->
	<div class="trackInfo">
		<img id="artwork" width="150" height="150">
		<h1 id="artistname"></h1>
		<h1 id="songname"></h1>
	</div>
	<!-- Bootstrap modal notification (Popup tutorial on page load for how to use audio reaction) -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Quick tutorial</h5>
			  		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
			  		</button>
				</div>
				<div class="modal-body">
				  You can immediately press the submit button to play the pre-selected
                  Soundcloud track or you can click the Soundcloud button below to find your own track!
                  The second method requires you to paste the url into the textbox below and hit submit.<br>
				  <strong>Play:</strong><br>
				  Hit the submit button to find and play the selected song.<br> Note: Some artists on
                  Soundcloud do not allow their songs to be played through the API. Specifically,
                  an artist that requires a Soundcloud subscription (Go+) to listen to a song.<br>
				  <strong>Format:</strong><br>
				  https://soundcloud.com/user/track
				</div>
				<div class="modal-footer">
			  		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			  		<button type="button" class="btn btn-primary"><a href="https://soundcloud.com/discover" target="_blank"><i class="fab fa-soundcloud soundcloud"></i></a></button>
				</div>
		  	</div>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script type="text/javascript" src="JS/audio-visualizer.js"></script>
</body>

</html>