index.html 76 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>Kris Windham</title>
  7. <meta name="description" content="An archive of Kris Windham">
  8. <meta property="og:site_name" content="Kris Windham" />
  9. <meta property="og:title" content="Kris Windham"/>
  10. <meta property="og:description" content="An archive of Kris Windham" />
  11. <meta property="og:image" content="https://kriswindham.com/img/kris.jpg" />
  12. <meta property="og:url" content="https://kriswindham.com" />
  13. <meta name="twitter:card" content="summary_large_image">
  14. <link href="css/site.css" rel="stylesheet">
  15. <link rel="icon" href="img/favicon.png">
  16. </head>
  17. <body>
  18. <header>
  19. <!--<nav class="navbar fixed-top navbar-expand-lg bg-light">
  20. <div class="container-fluid">
  21. <a class="navbar-brand mx-auto noto fw-bold fs-3" href="#">Kris Windham</a>
  22. </div>-->
  23. <div class="container pt-lg-5 mt-5">
  24. <div class="row">
  25. <h1 class="noto fw-bold fs-3 text-center text-white" style="text-shadow: 2px 2px 4px #373737;">Kris Windham</h1>
  26. <p class="noto small text-center text-light mb-0">1975-2021</p>
  27. </div>
  28. </div>
  29. </header>
  30. <main>
  31. <div class="container-fluid pt-lg-2 mt-2">
  32. <div class="row">
  33. <!-- Playlist Container -->
  34. <div id="blue-playlist-container">
  35. <!-- Amplitude Player -->
  36. <div id="amplitude-player">
  37. <!-- Left Side Player -->
  38. <div id="amplitude-left">
  39. <img data-amplitude-song-info="cover_art_url" class="album-art"/>
  40. <div class="amplitude-visualization" id="large-visualization">
  41. </div>
  42. <div id="player-left-bottom">
  43. <div id="time-container">
  44. <span class="current-time">
  45. <span class="amplitude-current-minutes" ></span>:<span class="amplitude-current-seconds"></span>
  46. </span>
  47. <div id="progress-container">
  48. <div class="amplitude-wave-form">
  49. </div>
  50. <input type="range" class="amplitude-song-slider"/>
  51. <progress id="song-played-progress" class="amplitude-song-played-progress"></progress>
  52. <progress id="song-buffered-progress" class="amplitude-buffered-progress" value="0"></progress>
  53. </div>
  54. <span class="duration">
  55. <span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
  56. </span>
  57. </div>
  58. <div id="control-container">
  59. <div id="repeat-container">
  60. <!--<div class="amplitude-repeat" id="repeat"></div>-->
  61. <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle"></div>
  62. </div>
  63. <div id="central-control-container">
  64. <div id="central-controls">
  65. <div class="amplitude-prev" id="previous"></div>
  66. <div class="amplitude-play-pause" id="play-pause"></div>
  67. <div class="amplitude-next" id="next"></div>
  68. </div>
  69. </div>
  70. <!--<div id="volume-container">
  71. <div class="volume-controls">
  72. <div class="amplitude-mute amplitude-not-muted"></div>
  73. <input type="range" class="amplitude-volume-slider"/>
  74. <div class="ms-range-fix"></div>
  75. </div>
  76. <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle-right"></div>
  77. </div>-->
  78. </div>
  79. <div id="meta-container">
  80. <span data-amplitude-song-info="name" class="song-name"></span>
  81. <div class="song-artist-album">
  82. <span data-amplitude-song-info="artist"></span>
  83. <span data-amplitude-song-info="album"></span>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <!-- End Left Side Player -->
  89. <!-- Right Side Player -->
  90. <div id="amplitude-right">
  91. <ul class="nav nav-tabs" id="playlists" role="tablist">
  92. <li class="nav-item" role="presentation">
  93. <a class="nav-link text-secondary rounded-0 border-top-0 border-left-0 active" data-bs-toggle="tab" data-bs-target="#piano-tab-pane" type="button" role="tab" aria-controls="piano-tab-pane" aria-selected="true"><small>Piano</small></a>
  94. </li>
  95. <li class="nav-item" role="presentation">
  96. <a class="nav-link text-secondary rounded-0 border-top-0" data-bs-toggle="tab" data-bs-target="#keyboard-tab-pane" type="button" role="tab" aria-controls="keyboard-tab-pane" aria-selected="false"><small>Keyboard</small></a>
  97. </li>
  98. <li class="nav-item" role="presentation">
  99. <a class="nav-link text-secondary rounded-0 border-top-0" data-bs-toggle="tab" data-bs-target="#electronic-tab-pane" type="button" role="tab" aria-controls="electronic-tab-pane" aria-selected="false"><small>Electronic</small></a>
  100. </li>
  101. <li class="nav-item" role="presentation">
  102. <a class="nav-link text-secondary rounded-0 border-top-0" data-bs-toggle="tab" data-bs-target="#stream-tab-pane" type="button" role="tab" aria-controls="stream-tab-pane" aria-selected="false"><small>Streams</small></a>
  103. </li>
  104. </ul>
  105. <div class="tab-content">
  106. <!-- Piano -->
  107. <div class="tab-pane fade show active" id="piano-tab-pane" role="tabpanel" aria-labelledby="piano-tab" tabindex="0">
  108. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="0">
  109. <div class="song-now-playing-icon-container">
  110. <div class="play-button-container"></div>
  111. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  112. </div>
  113. <div class="song-meta-data">
  114. <span class="song-title">Scenes from Childhood, Op. 15 No. 1</span>
  115. <span class="song-artist">Robert Schumann</span>
  116. </div>
  117. <span class="song-duration">1:20</span>
  118. </div>
  119. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="1">
  120. <div class="song-now-playing-icon-container">
  121. <div class="play-button-container"></div>
  122. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  123. </div>
  124. <div class="song-meta-data">
  125. <span class="song-title">Mazurka in A minor, Op. 17 No. 4</span>
  126. <span class="song-artist">Frédéric Chopin</span>
  127. </div>
  128. <span class="song-duration">1:27</span>
  129. </div>
  130. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="2">
  131. <div class="song-now-playing-icon-container">
  132. <div class="play-button-container"></div>
  133. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  134. </div>
  135. <div class="song-meta-data">
  136. <span class="song-title">Doctor Gradus ad Parnassum</span>
  137. <span class="song-artist">Claude Debussy: Children's Corner, L. 113</span>
  138. </div>
  139. <span class="song-duration">5:41</span>
  140. </div>
  141. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="3">
  142. <div class="song-now-playing-icon-container">
  143. <div class="play-button-container"></div>
  144. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  145. </div>
  146. <div class="song-meta-data">
  147. <span class="song-title">Sonatina in C Major, Op. 55 No. 1</span>
  148. <span class="song-artist">Friedrich Kuhlau</span>
  149. </div>
  150. <span class="song-duration">5:41</span>
  151. </div>
  152. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="4">
  153. <div class="song-now-playing-icon-container">
  154. <div class="play-button-container"></div>
  155. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  156. </div>
  157. <div class="song-meta-data">
  158. <span class="song-title">China</span>
  159. <span class="song-artist">Icon ( 2010 )</span>
  160. </div>
  161. <span class="song-duration">2:55</span>
  162. </div>
  163. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="5">
  164. <div class="song-now-playing-icon-container">
  165. <div class="play-button-container"></div>
  166. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  167. </div>
  168. <div class="song-meta-data">
  169. <span class="song-title">Experiment in C Minor</span>
  170. <span class="song-artist">Icon ( 2010 )</span>
  171. </div>
  172. <span class="song-duration">6:57</span>
  173. </div>
  174. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="6">
  175. <div class="song-now-playing-icon-container">
  176. <div class="play-button-container"></div>
  177. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  178. </div>
  179. <div class="song-meta-data">
  180. <span class="song-title">E Minor Diversion</span>
  181. <span class="song-artist">Icon ( 2010 )</span>
  182. </div>
  183. <span class="song-duration">3:20</span>
  184. </div>
  185. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="7">
  186. <div class="song-now-playing-icon-container">
  187. <div class="play-button-container"></div>
  188. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  189. </div>
  190. <div class="song-meta-data">
  191. <span class="song-title">Poem</span>
  192. <span class="song-artist">Icon ( 2010 )</span>
  193. </div>
  194. <span class="song-duration">3:17</span>
  195. </div>
  196. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="8">
  197. <div class="song-now-playing-icon-container">
  198. <div class="play-button-container"></div>
  199. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  200. </div>
  201. <div class="song-meta-data">
  202. <span class="song-title">The Other Room</span>
  203. <span class="song-artist">Icon ( 2010 )</span>
  204. </div>
  205. <span class="song-duration">2:33</span>
  206. </div>
  207. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="9">
  208. <div class="song-now-playing-icon-container">
  209. <div class="play-button-container"></div>
  210. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  211. </div>
  212. <div class="song-meta-data">
  213. <span class="song-title">Smokin</span>
  214. <span class="song-artist">Icon ( 2010 )</span>
  215. </div>
  216. <span class="song-duration">1:15</span>
  217. </div>
  218. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="10">
  219. <div class="song-now-playing-icon-container">
  220. <div class="play-button-container"></div>
  221. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  222. </div>
  223. <div class="song-meta-data">
  224. <span class="song-title">Poem #3</span>
  225. <span class="song-artist">Icon ( 2010 )</span>
  226. </div>
  227. <span class="song-duration">1:03</span>
  228. </div>
  229. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="11">
  230. <div class="song-now-playing-icon-container">
  231. <div class="play-button-container"></div>
  232. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  233. </div>
  234. <div class="song-meta-data">
  235. <span class="song-title">Poem #4</span>
  236. <span class="song-artist">Icon ( 2010 )</span>
  237. </div>
  238. <span class="song-duration">1:18</span>
  239. </div>
  240. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="12">
  241. <div class="song-now-playing-icon-container">
  242. <div class="play-button-container"></div>
  243. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  244. </div>
  245. <div class="song-meta-data">
  246. <span class="song-title">Prelude in G Minor</span>
  247. <span class="song-artist">Icon ( 2010 )</span>
  248. </div>
  249. <span class="song-duration">2:26</span>
  250. </div>
  251. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="13">
  252. <div class="song-now-playing-icon-container">
  253. <div class="play-button-container"></div>
  254. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  255. </div>
  256. <div class="song-meta-data">
  257. <span class="song-title">Farout</span>
  258. <span class="song-artist">Icon ( 2010 )</span>
  259. </div>
  260. <span class="song-duration">1:38</span>
  261. </div>
  262. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="14">
  263. <div class="song-now-playing-icon-container">
  264. <div class="play-button-container"></div>
  265. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  266. </div>
  267. <div class="song-meta-data">
  268. <span class="song-title">China #2</span>
  269. <span class="song-artist">Icon ( 2010 )</span>
  270. </div>
  271. <span class="song-duration">2:55</span>
  272. </div>
  273. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="15">
  274. <div class="song-now-playing-icon-container">
  275. <div class="play-button-container"></div>
  276. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  277. </div>
  278. <div class="song-meta-data">
  279. <span class="song-title">Clementi Sample</span>
  280. <span class="song-artist">Diversions ( 2012 )</span>
  281. </div>
  282. <span class="song-duration">1:00</span>
  283. </div>
  284. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="16">
  285. <div class="song-now-playing-icon-container">
  286. <div class="play-button-container"></div>
  287. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  288. </div>
  289. <div class="song-meta-data">
  290. <span class="song-title">Clementi Sample #2</span>
  291. <span class="song-artist">Diversions ( 2012 )</span>
  292. </div>
  293. <span class="song-duration">1:05</span>
  294. </div>
  295. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="17">
  296. <div class="song-now-playing-icon-container">
  297. <div class="play-button-container"></div>
  298. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  299. </div>
  300. <div class="song-meta-data">
  301. <span class="song-title">Nocturne Sample</span>
  302. <span class="song-artist">Diversions ( 2012 )</span>
  303. </div>
  304. <span class="song-duration">1:55</span>
  305. </div>
  306. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="18">
  307. <div class="song-now-playing-icon-container">
  308. <div class="play-button-container"></div>
  309. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  310. </div>
  311. <div class="song-meta-data">
  312. <span class="song-title">Diversion in D Sharp</span>
  313. <span class="song-artist">Diversions ( 2012 )</span>
  314. </div>
  315. <span class="song-duration">2:13</span>
  316. </div>
  317. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="19">
  318. <div class="song-now-playing-icon-container">
  319. <div class="play-button-container"></div>
  320. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  321. </div>
  322. <div class="song-meta-data">
  323. <span class="song-title">Meditation in F Sharp</span>
  324. <span class="song-artist">Diversions ( 2012 )</span>
  325. </div>
  326. <span class="song-duration">2:47</span>
  327. </div>
  328. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="20">
  329. <div class="song-now-playing-icon-container">
  330. <div class="play-button-container"></div>
  331. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  332. </div>
  333. <div class="song-meta-data">
  334. <span class="song-title">Poem #2</span>
  335. <span class="song-artist">Diversions ( 2012 )</span>
  336. </div>
  337. <span class="song-duration">2:24</span>
  338. </div>
  339. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="21">
  340. <div class="song-now-playing-icon-container">
  341. <div class="play-button-container"></div>
  342. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  343. </div>
  344. <div class="song-meta-data">
  345. <span class="song-title">Prelude in C Minor</span>
  346. <span class="song-artist">Diversions ( 2012 )</span>
  347. </div>
  348. <span class="song-duration">1:33</span>
  349. </div>
  350. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="22">
  351. <div class="song-now-playing-icon-container">
  352. <div class="play-button-container"></div>
  353. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  354. </div>
  355. <div class="song-meta-data">
  356. <span class="song-title">Solfeggio</span>
  357. <span class="song-artist">Diversions ( 2012 )</span>
  358. </div>
  359. <span class="song-duration">0:58</span>
  360. </div>
  361. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="23">
  362. <div class="song-now-playing-icon-container">
  363. <div class="play-button-container"></div>
  364. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  365. </div>
  366. <div class="song-meta-data">
  367. <span class="song-title">Waltz in E Minor</span>
  368. <span class="song-artist">Diversions ( 2012 )</span>
  369. </div>
  370. <span class="song-duration">1:40</span>
  371. </div>
  372. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="24">
  373. <div class="song-now-playing-icon-container">
  374. <div class="play-button-container"></div>
  375. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  376. </div>
  377. <div class="song-meta-data">
  378. <span class="song-title">Domenica</span>
  379. <span class="song-artist">Unknown</span>
  380. </div>
  381. <span class="song-duration">6:39</span>
  382. </div>
  383. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="25">
  384. <div class="song-now-playing-icon-container">
  385. <div class="play-button-container"></div>
  386. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  387. </div>
  388. <div class="song-meta-data">
  389. <span class="song-title">Down</span>
  390. <span class="song-artist">Unknown</span>
  391. </div>
  392. <span class="song-duration">4:50</span>
  393. </div>
  394. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="26">
  395. <div class="song-now-playing-icon-container">
  396. <div class="play-button-container"></div>
  397. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  398. </div>
  399. <div class="song-meta-data">
  400. <span class="song-title">Feeling Low</span>
  401. <span class="song-artist">Unknown</span>
  402. </div>
  403. <span class="song-duration">2:39</span>
  404. </div>
  405. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="27">
  406. <div class="song-now-playing-icon-container">
  407. <div class="play-button-container"></div>
  408. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  409. </div>
  410. <div class="song-meta-data">
  411. <span class="song-title">First Flight</span>
  412. <span class="song-artist">Unknown</span>
  413. </div>
  414. <span class="song-duration">0:36</span>
  415. </div>
  416. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="28">
  417. <div class="song-now-playing-icon-container">
  418. <div class="play-button-container"></div>
  419. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  420. </div>
  421. <div class="song-meta-data">
  422. <span class="song-title">Halftime</span>
  423. <span class="song-artist">Unknown</span>
  424. </div>
  425. <span class="song-duration">5:42</span>
  426. </div>
  427. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="29">
  428. <div class="song-now-playing-icon-container">
  429. <div class="play-button-container"></div>
  430. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  431. </div>
  432. <div class="song-meta-data">
  433. <span class="song-title">Ice</span>
  434. <span class="song-artist">Unknown</span>
  435. </div>
  436. <span class="song-duration">2:39</span>
  437. </div>
  438. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="30">
  439. <div class="song-now-playing-icon-container">
  440. <div class="play-button-container"></div>
  441. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  442. </div>
  443. <div class="song-meta-data">
  444. <span class="song-title">Impression</span>
  445. <span class="song-artist">Unknown</span>
  446. </div>
  447. <span class="song-duration">3:14</span>
  448. </div>
  449. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="31">
  450. <div class="song-now-playing-icon-container">
  451. <div class="play-button-container"></div>
  452. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  453. </div>
  454. <div class="song-meta-data">
  455. <span class="song-title">Never Before Heard</span>
  456. <span class="song-artist">Unknown</span>
  457. </div>
  458. <span class="song-duration">1:59</span>
  459. </div>
  460. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="32">
  461. <div class="song-now-playing-icon-container">
  462. <div class="play-button-container"></div>
  463. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  464. </div>
  465. <div class="song-meta-data">
  466. <span class="song-title">New Years Day</span>
  467. <span class="song-artist">Unknown</span>
  468. </div>
  469. <span class="song-duration">1:05</span>
  470. </div>
  471. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="33">
  472. <div class="song-now-playing-icon-container">
  473. <div class="play-button-container"></div>
  474. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  475. </div>
  476. <div class="song-meta-data">
  477. <span class="song-title">Night Sun</span>
  478. <span class="song-artist">Unknown</span>
  479. </div>
  480. <span class="song-duration">4:48</span>
  481. </div>
  482. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="34">
  483. <div class="song-now-playing-icon-container">
  484. <div class="play-button-container"></div>
  485. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  486. </div>
  487. <div class="song-meta-data">
  488. <span class="song-title">Piano with Flute & Strings</span>
  489. <span class="song-artist">Unknown</span>
  490. </div>
  491. <span class="song-duration">1:32</span>
  492. </div>
  493. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="35">
  494. <div class="song-now-playing-icon-container">
  495. <div class="play-button-container"></div>
  496. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  497. </div>
  498. <div class="song-meta-data">
  499. <span class="song-title">Piece</span>
  500. <span class="song-artist">Unknown</span>
  501. </div>
  502. <span class="song-duration">2:48</span>
  503. </div>
  504. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="36">
  505. <div class="song-now-playing-icon-container">
  506. <div class="play-button-container"></div>
  507. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  508. </div>
  509. <div class="song-meta-data">
  510. <span class="song-title">Prelude No.7 Opus 21 "Dust of Daybreak"</span>
  511. <span class="song-artist">Unknown</span>
  512. </div>
  513. <span class="song-duration">6:39</span>
  514. </div>
  515. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="37">
  516. <div class="song-now-playing-icon-container">
  517. <div class="play-button-container"></div>
  518. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  519. </div>
  520. <div class="song-meta-data">
  521. <span class="song-title">Sketch</span>
  522. <span class="song-artist">Unknown</span>
  523. </div>
  524. <span class="song-duration">1:00</span>
  525. </div>
  526. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="38">
  527. <div class="song-now-playing-icon-container">
  528. <div class="play-button-container"></div>
  529. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  530. </div>
  531. <div class="song-meta-data">
  532. <span class="song-title">Soaring</span>
  533. <span class="song-artist">Unknown</span>
  534. </div>
  535. <span class="song-duration">1:25</span>
  536. </div>
  537. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="39">
  538. <div class="song-now-playing-icon-container">
  539. <div class="play-button-container"></div>
  540. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  541. </div>
  542. <div class="song-meta-data">
  543. <span class="song-title">Time Slips</span>
  544. <span class="song-artist">Unknown</span>
  545. </div>
  546. <span class="song-duration">4:44</span>
  547. </div>
  548. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="40">
  549. <div class="song-now-playing-icon-container">
  550. <div class="play-button-container"></div>
  551. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  552. </div>
  553. <div class="song-meta-data">
  554. <span class="song-title">Valentines</span>
  555. <span class="song-artist">Unknown</span>
  556. </div>
  557. <span class="song-duration">8:31</span>
  558. </div>
  559. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="41">
  560. <div class="song-now-playing-icon-container">
  561. <div class="play-button-container"></div>
  562. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  563. </div>
  564. <div class="song-meta-data">
  565. <span class="song-title">Winter</span>
  566. <span class="song-artist">Unknown</span>
  567. </div>
  568. <span class="song-duration">4:59</span>
  569. </div>
  570. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="42">
  571. <div class="song-now-playing-icon-container">
  572. <div class="play-button-container"></div>
  573. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  574. </div>
  575. <div class="song-meta-data">
  576. <span class="song-title">1</span>
  577. <span class="song-artist">Clips for Film</span>
  578. </div>
  579. <span class="song-duration">4:59</span>
  580. </div>
  581. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="43">
  582. <div class="song-now-playing-icon-container">
  583. <div class="play-button-container"></div>
  584. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  585. </div>
  586. <div class="song-meta-data">
  587. <span class="song-title">2</span>
  588. <span class="song-artist">Clips for Film</span>
  589. </div>
  590. <span class="song-duration">8:31</span>
  591. </div>
  592. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="44">
  593. <div class="song-now-playing-icon-container">
  594. <div class="play-button-container"></div>
  595. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  596. </div>
  597. <div class="song-meta-data">
  598. <span class="song-title">3</span>
  599. <span class="song-artist">Clips for Film</span>
  600. </div>
  601. <span class="song-duration">3:15</span>
  602. </div>
  603. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="45">
  604. <div class="song-now-playing-icon-container">
  605. <div class="play-button-container"></div>
  606. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  607. </div>
  608. <div class="song-meta-data">
  609. <span class="song-title">4</span>
  610. <span class="song-artist">Clips for Film</span>
  611. </div>
  612. <span class="song-duration">1:25</span>
  613. </div>
  614. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="46">
  615. <div class="song-now-playing-icon-container">
  616. <div class="play-button-container"></div>
  617. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  618. </div>
  619. <div class="song-meta-data">
  620. <span class="song-title">5</span>
  621. <span class="song-artist">Clips for Film</span>
  622. </div>
  623. <span class="song-duration">4:48</span>
  624. </div>
  625. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="47">
  626. <div class="song-now-playing-icon-container">
  627. <div class="play-button-container"></div>
  628. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  629. </div>
  630. <div class="song-meta-data">
  631. <span class="song-title">6</span>
  632. <span class="song-artist">Clips for Film</span>
  633. </div>
  634. <span class="song-duration">1:05</span>
  635. </div>
  636. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="48">
  637. <div class="song-now-playing-icon-container">
  638. <div class="play-button-container"></div>
  639. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  640. </div>
  641. <div class="song-meta-data">
  642. <span class="song-title">7</span>
  643. <span class="song-artist">Clips for Film</span>
  644. </div>
  645. <span class="song-duration">2:39</span>
  646. </div>
  647. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="49">
  648. <div class="song-now-playing-icon-container">
  649. <div class="play-button-container"></div>
  650. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  651. </div>
  652. <div class="song-meta-data">
  653. <span class="song-title">8</span>
  654. <span class="song-artist">Clips for Film</span>
  655. </div>
  656. <span class="song-duration">0:36</span>
  657. </div>
  658. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="50">
  659. <div class="song-now-playing-icon-container">
  660. <div class="play-button-container"></div>
  661. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  662. </div>
  663. <div class="song-meta-data">
  664. <span class="song-title">9</span>
  665. <span class="song-artist">Clips for Film</span>
  666. </div>
  667. <span class="song-duration">5:16</span>
  668. </div>
  669. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="51">
  670. <div class="song-now-playing-icon-container">
  671. <div class="play-button-container"></div>
  672. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  673. </div>
  674. <div class="song-meta-data">
  675. <span class="song-title">10</span>
  676. <span class="song-artist">Clips for Film</span>
  677. </div>
  678. <span class="song-duration">1:32</span>
  679. </div>
  680. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="52">
  681. <div class="song-now-playing-icon-container">
  682. <div class="play-button-container"></div>
  683. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  684. </div>
  685. <div class="song-meta-data">
  686. <span class="song-title">11</span>
  687. <span class="song-artist">Clips for Film</span>
  688. </div>
  689. <span class="song-duration">1:44</span>
  690. </div>
  691. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="53">
  692. <div class="song-now-playing-icon-container">
  693. <div class="play-button-container"></div>
  694. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  695. </div>
  696. <div class="song-meta-data">
  697. <span class="song-title">12</span>
  698. <span class="song-artist">Clips for Film</span>
  699. </div>
  700. <span class="song-duration">6:57</span>
  701. </div>
  702. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="54">
  703. <div class="song-now-playing-icon-container">
  704. <div class="play-button-container"></div>
  705. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  706. </div>
  707. <div class="song-meta-data">
  708. <span class="song-title">13</span>
  709. <span class="song-artist">Clips for Film</span>
  710. </div>
  711. <span class="song-duration">3:14</span>
  712. </div>
  713. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="55">
  714. <div class="song-now-playing-icon-container">
  715. <div class="play-button-container"></div>
  716. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  717. </div>
  718. <div class="song-meta-data">
  719. <span class="song-title">14</span>
  720. <span class="song-artist">Clips for Film</span>
  721. </div>
  722. <span class="song-duration">1:03</span>
  723. </div>
  724. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="56">
  725. <div class="song-now-playing-icon-container">
  726. <div class="play-button-container"></div>
  727. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  728. </div>
  729. <div class="song-meta-data">
  730. <span class="song-title">15</span>
  731. <span class="song-artist">Clips for Film</span>
  732. </div>
  733. <span class="song-duration">0:36</span>
  734. </div>
  735. </div>
  736. <!-- Keyboard -->
  737. <div class="tab-pane fade" id="keyboard-tab-pane" role="tabpanel" aria-labelledby="keyboard-tab" tabindex="1">
  738. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="57">
  739. <div class="song-now-playing-icon-container">
  740. <div class="play-button-container"></div>
  741. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  742. </div>
  743. <div class="song-meta-data">
  744. <span class="song-title">Circle Clip</span>
  745. <span class="song-artist">Delia</span>
  746. </div>
  747. <span class="song-duration">0:55</span>
  748. </div>
  749. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="58">
  750. <div class="song-now-playing-icon-container">
  751. <div class="play-button-container"></div>
  752. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  753. </div>
  754. <div class="song-meta-data">
  755. <span class="song-title">No Woman No Cry</span>
  756. <span class="song-artist">Delia</span>
  757. </div>
  758. <span class="song-duration">1:50</span>
  759. </div>
  760. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="59">
  761. <div class="song-now-playing-icon-container">
  762. <div class="play-button-container"></div>
  763. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  764. </div>
  765. <div class="song-meta-data">
  766. <span class="song-title">One More Cup of Coffee</span>
  767. <span class="song-artist">Delia</span>
  768. </div>
  769. <span class="song-duration">5:16</span>
  770. </div>
  771. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="60">
  772. <div class="song-now-playing-icon-container">
  773. <div class="play-button-container"></div>
  774. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  775. </div>
  776. <div class="song-meta-data">
  777. <span class="song-title">Rhapsody In O Flat Minor</span>
  778. <span class="song-artist">Delia</span>
  779. </div>
  780. <span class="song-duration">7:51</span>
  781. </div>
  782. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="61">
  783. <div class="song-now-playing-icon-container">
  784. <div class="play-button-container"></div>
  785. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  786. </div>
  787. <div class="song-meta-data">
  788. <span class="song-title">The River</span>
  789. <span class="song-artist">Delia</span>
  790. </div>
  791. <span class="song-duration">1:18</span>
  792. </div>
  793. </div>
  794. <!-- Electronic -->
  795. <div class="tab-pane fade" id="electronic-tab-pane" role="tabpanel" aria-labelledby="electronic-tab" tabindex="2">
  796. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="62">
  797. <div class="song-now-playing-icon-container">
  798. <div class="play-button-container"></div>
  799. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  800. </div>
  801. <div class="song-meta-data">
  802. <span class="song-title">Protos</span>
  803. <span class="song-artist">Mystic</span>
  804. </div>
  805. <span class="song-duration">1:27</span>
  806. </div>
  807. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="63">
  808. <div class="song-now-playing-icon-container">
  809. <div class="play-button-container"></div>
  810. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  811. </div>
  812. <div class="song-meta-data">
  813. <span class="song-title">Mercury</span>
  814. <span class="song-artist">Mystic</span>
  815. </div>
  816. <span class="song-duration">6:39</span>
  817. </div>
  818. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="64">
  819. <div class="song-now-playing-icon-container">
  820. <div class="play-button-container"></div>
  821. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  822. </div>
  823. <div class="song-meta-data">
  824. <span class="song-title">Mystic</span>
  825. <span class="song-artist">Mystic</span>
  826. </div>
  827. <span class="song-duration">1:02</span>
  828. </div>
  829. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="65">
  830. <div class="song-now-playing-icon-container">
  831. <div class="play-button-container"></div>
  832. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  833. </div>
  834. <div class="song-meta-data">
  835. <span class="song-title">Hermes</span>
  836. <span class="song-artist">Mystic</span>
  837. </div>
  838. <span class="song-duration">1:02</span>
  839. </div>
  840. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="66">
  841. <div class="song-now-playing-icon-container">
  842. <div class="play-button-container"></div>
  843. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  844. </div>
  845. <div class="song-meta-data">
  846. <span class="song-title">Argentum</span>
  847. <span class="song-artist">Mystic</span>
  848. </div>
  849. <span class="song-duration">1:02</span>
  850. </div>
  851. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="67">
  852. <div class="song-now-playing-icon-container">
  853. <div class="play-button-container"></div>
  854. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  855. </div>
  856. <div class="song-meta-data">
  857. <span class="song-title">Aurum</span>
  858. <span class="song-artist">Mystic</span>
  859. </div>
  860. <span class="song-duration">1:02</span>
  861. </div>
  862. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="68">
  863. <div class="song-now-playing-icon-container">
  864. <div class="play-button-container"></div>
  865. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  866. </div>
  867. <div class="song-meta-data">
  868. <span class="song-title">Ouroboros</span>
  869. <span class="song-artist">Mystic</span>
  870. </div>
  871. <span class="song-duration">1:02</span>
  872. </div>
  873. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="69">
  874. <div class="song-now-playing-icon-container">
  875. <div class="play-button-container"></div>
  876. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  877. </div>
  878. <div class="song-meta-data">
  879. <span class="song-title">Orbital Habitat</span>
  880. <span class="song-artist">Suka</span>
  881. </div>
  882. <span class="song-duration">2:45</span>
  883. </div>
  884. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="70">
  885. <div class="song-now-playing-icon-container">
  886. <div class="play-button-container"></div>
  887. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  888. </div>
  889. <div class="song-meta-data">
  890. <span class="song-title">Ogon</span>
  891. <span class="song-artist">Suka</span>
  892. </div>
  893. <span class="song-duration">2:17</span>
  894. </div>
  895. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="71">
  896. <div class="song-now-playing-icon-container">
  897. <div class="play-button-container"></div>
  898. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  899. </div>
  900. <div class="song-meta-data">
  901. <span class="song-title">Onus</span>
  902. <span class="song-artist">Suka</span>
  903. </div>
  904. <span class="song-duration">3:21</span>
  905. </div>
  906. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="72">
  907. <div class="song-now-playing-icon-container">
  908. <div class="play-button-container"></div>
  909. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  910. </div>
  911. <div class="song-meta-data">
  912. <span class="song-title">Dom Suka</span>
  913. <span class="song-artist">Suka</span>
  914. </div>
  915. <span class="song-duration">3:58</span>
  916. </div>
  917. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="73">
  918. <div class="song-now-playing-icon-container">
  919. <div class="play-button-container"></div>
  920. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  921. </div>
  922. <div class="song-meta-data">
  923. <span class="song-title">Sedulous</span>
  924. <span class="song-artist">Suka</span>
  925. </div>
  926. <span class="song-duration">2:13</span>
  927. </div>
  928. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="74">
  929. <div class="song-now-playing-icon-container">
  930. <div class="play-button-container"></div>
  931. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  932. </div>
  933. <div class="song-meta-data">
  934. <span class="song-title">Strakh</span>
  935. <span class="song-artist">Suka</span>
  936. </div>
  937. <span class="song-duration">3:53</span>
  938. </div>
  939. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="75">
  940. <div class="song-now-playing-icon-container">
  941. <div class="play-button-container"></div>
  942. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  943. </div>
  944. <div class="song-meta-data">
  945. <span class="song-title">Blank</span>
  946. <span class="song-artist">Suka</span>
  947. </div>
  948. <span class="song-duration">3:04</span>
  949. </div>
  950. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="76">
  951. <div class="song-now-playing-icon-container">
  952. <div class="play-button-container"></div>
  953. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  954. </div>
  955. <div class="song-meta-data">
  956. <span class="song-title">Simple X</span>
  957. <span class="song-artist">Vox Dei</span>
  958. </div>
  959. <span class="song-duration">5:43</span>
  960. </div>
  961. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="77">
  962. <div class="song-now-playing-icon-container">
  963. <div class="play-button-container"></div>
  964. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  965. </div>
  966. <div class="song-meta-data">
  967. <span class="song-title">Vox Dei</span>
  968. <span class="song-artist">Vox Dei</span>
  969. </div>
  970. <span class="song-duration">11:55</span>
  971. </div>
  972. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="78">
  973. <div class="song-now-playing-icon-container">
  974. <div class="play-button-container"></div>
  975. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  976. </div>
  977. <div class="song-meta-data">
  978. <span class="song-title">Spiritus</span>
  979. <span class="song-artist">Vox Dei</span>
  980. </div>
  981. <span class="song-duration">6:22</span>
  982. </div>
  983. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="79">
  984. <div class="song-now-playing-icon-container">
  985. <div class="play-button-container"></div>
  986. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  987. </div>
  988. <div class="song-meta-data">
  989. <span class="song-title">Isabellae</span>
  990. <span class="song-artist">Vox Dei</span>
  991. </div>
  992. <span class="song-duration">4:32</span>
  993. </div>
  994. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="80">
  995. <div class="song-now-playing-icon-container">
  996. <div class="play-button-container"></div>
  997. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  998. </div>
  999. <div class="song-meta-data">
  1000. <span class="song-title">Inlustris</span>
  1001. <span class="song-artist">Vox Dei</span>
  1002. </div>
  1003. <span class="song-duration">3:44</span>
  1004. </div>
  1005. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="81">
  1006. <div class="song-now-playing-icon-container">
  1007. <div class="play-button-container"></div>
  1008. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1009. </div>
  1010. <div class="song-meta-data">
  1011. <span class="song-title">Oceanus</span>
  1012. <span class="song-artist">Vox Dei</span>
  1013. </div>
  1014. <span class="song-duration">3:56</span>
  1015. </div>
  1016. </div>
  1017. <!-- Streams -->
  1018. <div class="tab-pane fade" id="stream-tab-pane" role="tabpanel" aria-labelledby="stream-tab" tabindex="3">
  1019. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="82">
  1020. <div class="song-now-playing-icon-container">
  1021. <div class="play-button-container"></div>
  1022. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1023. </div>
  1024. <div class="song-meta-data">
  1025. <span class="song-title">Live - Easter</span>
  1026. <span class="song-artist">2016</span>
  1027. </div>
  1028. <span class="song-duration">9:04</span>
  1029. </div>
  1030. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="83">
  1031. <div class="song-now-playing-icon-container">
  1032. <div class="play-button-container"></div>
  1033. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1034. </div>
  1035. <div class="song-meta-data">
  1036. <span class="song-title">Live - 3/26</span>
  1037. <span class="song-artist">2016</span>
  1038. </div>
  1039. <span class="song-duration">4:37</span>
  1040. </div>
  1041. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="84">
  1042. <div class="song-now-playing-icon-container">
  1043. <div class="play-button-container"></div>
  1044. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1045. </div>
  1046. <div class="song-meta-data">
  1047. <span class="song-title">Live - 3/27</span>
  1048. <span class="song-artist">2016</span>
  1049. </div>
  1050. <span class="song-duration">9:03</span>
  1051. </div>
  1052. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="85">
  1053. <div class="song-now-playing-icon-container">
  1054. <div class="play-button-container"></div>
  1055. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1056. </div>
  1057. <div class="song-meta-data">
  1058. <span class="song-title">Live - 3/28</span>
  1059. <span class="song-artist">2016</span>
  1060. </div>
  1061. <span class="song-duration">2:54</span>
  1062. </div>
  1063. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="86">
  1064. <div class="song-now-playing-icon-container">
  1065. <div class="play-button-container"></div>
  1066. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1067. </div>
  1068. <div class="song-meta-data">
  1069. <span class="song-title">Live - 3/29</span>
  1070. <span class="song-artist">2016</span>
  1071. </div>
  1072. <span class="song-duration">6:48</span>
  1073. </div>
  1074. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="87">
  1075. <div class="song-now-playing-icon-container">
  1076. <div class="play-button-container"></div>
  1077. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1078. </div>
  1079. <div class="song-meta-data">
  1080. <span class="song-title">Live - 4/10</span>
  1081. <span class="song-artist">2016</span>
  1082. </div>
  1083. <span class="song-duration">48:21</span>
  1084. </div>
  1085. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="88">
  1086. <div class="song-now-playing-icon-container">
  1087. <div class="play-button-container"></div>
  1088. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1089. </div>
  1090. <div class="song-meta-data">
  1091. <span class="song-title">Live - 4/24</span>
  1092. <span class="song-artist">2016</span>
  1093. </div>
  1094. <span class="song-duration">55:16</span>
  1095. </div>
  1096. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="89">
  1097. <div class="song-now-playing-icon-container">
  1098. <div class="play-button-container"></div>
  1099. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1100. </div>
  1101. <div class="song-meta-data">
  1102. <span class="song-title">Live - iWoody</span>
  1103. <span class="song-artist">2016</span>
  1104. </div>
  1105. <span class="song-duration">31:26</span>
  1106. </div>
  1107. <div class="mb-3 border-bottom border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="90">
  1108. <div class="song-now-playing-icon-container">
  1109. <div class="play-button-container"></div>
  1110. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1111. </div>
  1112. <div class="song-meta-data">
  1113. <span class="song-title">Live - iWoody(2)</span>
  1114. <span class="song-artist">2016</span>
  1115. </div>
  1116. <span class="song-duration">43:03</span>
  1117. </div>
  1118. <p class="mx-5 text-decoration-underline">* Will set these up the following after music licensing is in place. Please check back later.</p>
  1119. <div class="border-top border-secondary song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="91">
  1120. <div class="song-now-playing-icon-container">
  1121. <div class="play-button-container"></div>
  1122. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1123. </div>
  1124. <div class="song-meta-data">
  1125. <span class="song-title">* Kris Windham - Radio Show</span>
  1126. <span class="song-artist">2017-2020</span>
  1127. </div>
  1128. <span class="song-duration">00:00</span>
  1129. </div>
  1130. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="92">
  1131. <div class="song-now-playing-icon-container">
  1132. <div class="play-button-container"></div>
  1133. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1134. </div>
  1135. <div class="song-meta-data">
  1136. <span class="song-title">* Kris Windham - Country Brunch</span>
  1137. <span class="song-artist">2019-2021</span>
  1138. </div>
  1139. <span class="song-duration">00:00</span>
  1140. </div>
  1141. <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="93">
  1142. <div class="song-now-playing-icon-container">
  1143. <div class="play-button-container"></div>
  1144. <img class="now-playing" src="/img/audio/now-playing.svg"/>
  1145. </div>
  1146. <div class="song-meta-data">
  1147. <span class="song-title">* Kris Windham - Sunday Sermon</span>
  1148. <span class="song-artist">2020-2021</span>
  1149. </div>
  1150. <span class="song-duration">00:00</span>
  1151. </div>
  1152. </div>
  1153. </div>
  1154. </div>
  1155. <!-- End Right Side Player -->
  1156. </div>
  1157. <!-- End Amplitude Player -->
  1158. </div>
  1159. </div>
  1160. </main>
  1161. <div id="About" class="modal" tabindex="-1" aria-labelledby="About" aria-hidden="true">
  1162. <div class="modal-dialog modal-xl">
  1163. <div class="modal-content">
  1164. <div class="modal-header">
  1165. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1166. </div>
  1167. <div class="modal-body">
  1168. <div class="container px-lg-5">
  1169. <h4>Kristopher Roland Windham ( 1975-2021 )</h4>
  1170. <p>I've published this website as an archive for my brother. It's a collection of materials he published and had asked me to take care of it prior to his passing. Kris left behind an eclectic mix of audio recordings of him playing piano and other instruments, electronic audio creations, live performances, and radio broadcasts. He also had some software creations, photos, random graphics and other websites he had published. The websites were under three domains: KrisWindham.com, CommandLineJunkie.com, and DrGradus.com. The first of which was obvious, the second relates to a computer programming tool, and the last a reference to Gradus ad Parnassum, a latin phrase from Claude Debussy's piano composition that references the textbook on which Mozart learned to play.</p>
  1171. <p>Kris wrote two bios that were no longer published. They read:
  1172. <blockquote class="px-lg-5">Music has been my source of inspiration since I was a young child. I always aspired to become a classical pianist. I've been playing my instrument now for 26 years and and I still feel the same way about it as I did when I first started. I've been in many different directions, musically, but have always come back to my classical roots. My favorite composers include Shostakovich, Prokoviev, Bach, Debussy, and Richard Strauss. I also love the improvisational element that exist in jazz, and some rock and roll. I try to incorporate this element into the classical works I perform, in the same vein as Chopin. I really appreciate perfection, but do believe there is some room in the music for interpretation. I have been composing works for the piano since age 8 and now have quite a library of original pieces. I also enjoy recording and producing music as well. Recently, I injured my right index finger and have had to put my piano on hold for a while. While being a huge setback in my passion for music, it has helped me to further my programming skills. I began programming in BASIC on one of the first PCs at age 6 and have always had a knack for computers. In 1996 I worked for an online magazine handling online advertising. This was at a time when very few people had internet access. These days I spend most of my time with my family and hacking away on my laptop. I have plans to set up an online sound library and to continue recording my original music to use for multimedia and film. If you like the music your listening to right now, buy my CD, or just relax and enjoy. The best things in life are free...</blockquote>
  1173. <blockquote class="px-lg-5">Personal Website of Kris Windham <em>Programmer, Surfer, Father, and Pianist</em> I am a Programmer and surfer who works for Jack Russell Software in Charleston, SC. We build pharmacy and healthcare applications in Ruby, Rails, Sinatra, Coffeescript and NodeJS. Personally, I am very fond of nodeJS and CoffeeScript.I am very passionate about surfing and have 2 young daughters who like to surf with me. I am still working on setting up their team site at RootsSurf.com.I also enjoy screen printing and playing piano with the Monkey Men as well as composing and recording original classical compositions. A sample of a jazz tune I composed, recorded, and performed by myself can be found alongside of examples of original piano compositions can be found and a little trance music. Github: https://github.com/gradus, Twitter: http://twitter.com/krwindham, Blog: http://krwindham.nodejitsu.com</a> Coderwall: http://coderwall.com/gradus</p>
  1174. </blockquote>
  1175. <p>Kris sometimes attached images to his recordings and I've used those in the audio player. He broadcasted audio shows that I'll set up to stream on demand once I have the licensing. I'm organizing and archiving the rest of the materials using the the links at the bottom of this page. He was somewhat skeptical of social media and adamant about his privacy so I'm only including materials he had published. I wrote an essay on Kris which is available @ <a class="text-secondary" href="https://davidawindham.com/kristopher-roland-windham/" target="_blank">https://davidawindham.com/kristopher-roland-windham/</a>.</p><p>Thanks for the visit and please feel free to contact me if you have any questions or comments.</p>
  1176. <p class="pb-4">Sincerely, <br>David A. Windham</p>
  1177. </div>
  1178. </div>
  1179. </div>
  1180. </div>
  1181. </div>
  1182. <div id="Images" class="modal" tabindex="-1" aria-labelledby="Images" aria-hidden="true">
  1183. <div class="modal-dialog modal-xl">
  1184. <div class="modal-content">
  1185. <div class="modal-header">
  1186. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1187. </div>
  1188. <div class="modal-body">
  1189. <div class="container-fluid px-lg-5 mb-5">
  1190. <h4>Images</h4>
  1191. <p>Kris published very few photos and these are the images Kris had published on his websites</p>
  1192. <div class="row">
  1193. <div class="col">
  1194. <img class="img-fluid" src="/img/kris.jpg"/>
  1195. </div>
  1196. <div class="col">
  1197. <img class="img-fluid" src="/img/girls.jpg"/>
  1198. </div>
  1199. </div>
  1200. <div class="row">
  1201. <div class="col">
  1202. <img class="img-fluid" src="/img/fish.jpg"/>
  1203. </div>
  1204. <div class="col">
  1205. <img class="img-fluid" src="/img/doodods.jpg"/>
  1206. </div>
  1207. </div>
  1208. </div>
  1209. </div>
  1210. </div>
  1211. </div>
  1212. </div>
  1213. <div id="Video" class="modal" tabindex="-1" aria-labelledby="Video" aria-hidden="true">
  1214. <div class="modal-dialog modal-xl">
  1215. <div class="modal-content">
  1216. <div class="modal-header">
  1217. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1218. </div>
  1219. <div class="modal-body">
  1220. <div class="container-fluid px-lg-5 mb-5">
  1221. <div class="row">
  1222. <h5>REDEMPTION</h5>
  1223. <p>(2017) Music copyright Kris Windham. Thanks Jeter. This is the video for an original composition recorded last year by yours truly.</p>
  1224. <video id="redemption" poster="/img/redemption.png" controls src="/audio/video/redemption.mp4" type="video/mp4">
  1225. </div>
  1226. <div class="row mt-5">
  1227. <h5>Heart of Darkness The Hollow Men T.S. Eliot</h5>
  1228. <p>(2016) Marlon Brando as Col. Kurtz reading T.S. Eliot from the film Apocalypse Now with the addition of an original house music audio track.</p>
  1229. <video id="hollow" controls src="/audio/video/hollow_men.mp4" type="video/mp4">
  1230. </video>
  1231. </div>
  1232. </div>
  1233. </div>
  1234. </div>
  1235. </div>
  1236. </div>
  1237. <div id="Code" class="modal" tabindex="-1" aria-labelledby="Code" aria-hidden="true">
  1238. <div class="modal-dialog modal-xl">
  1239. <div class="modal-content">
  1240. <div class="modal-header">
  1241. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1242. </div>
  1243. <div class="modal-body">
  1244. <div class="container-fluid px-lg-5 mb-5">
  1245. <h4>Code</h4>
  1246. <p>Kris enjoyed programming and was fond of the Ruby language. He enjoyed contributing to open source software and is listed as an contributor on Nodejs, Node Package Manager, and some Ruby Gems. The majority of Kris' work was published on his servers under various domains and some additional projects were published to third party repositories at <a class="text-secondary" target="_blank" href="https://github.com/gradus">github.com/gradus</a>. I'll list some of them below and will fork the original repos to an archived account.</p>
  1247. <div class="row">
  1248. <div class="col">
  1249. <ul class="list-group list-group-flush">
  1250. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/easy-doc">easy-doc</a></li>
  1251. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/coffeekup">coffeeCup <- coffeekup</a></li>
  1252. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/black-coffee">black-coffee</a></li>
  1253. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/petulant-robot">petulant-robot</a></li>
  1254. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/simple-guestbook">simple-guestbook</a></li>
  1255. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/stress">stress</a> - 8 ball of good advice when things get tense</li>
  1256. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/zen">zen</a> - simple C code to display the zen of programming. When first learning Python, the first thing I did was type import this. I thought the poem or series of statements by Tim Peters was great. I still see a lot of truth and beauty in these statements. I look at code as art.</li>
  1257. </ul>
  1258. </div>
  1259. <div class="col">
  1260. <ul class="list-group list-group-flush">
  1261. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/pub-med-search">pub-med-search</a> - A simple template for adding a pub med (http://www.ncbi.nlm.nih.gov/pubmed/) search to your php website.</li>
  1262. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/dolphin-habits">dophin-habits</a></li>
  1263. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/saucer">saucer</a> - A minimalist node module reaching out with a welcome message</li>
  1264. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/surf-scoreboard">surf-scoreboard</a> - playing with event-driven coffeescript pattern for rewriting surf scoring application with nodeJS</li>
  1265. <li class="list-group-item"><a class="text-secondary" href="https://github.com/gradus/tako-macho">tako-macho</a> - A Tako, CoffeeCup boilerplate written in CoffeeScript with Skeleton layout.</li>
  1266. </ul>
  1267. </div>
  1268. </div>
  1269. </div>
  1270. </div>
  1271. </div>
  1272. </div>
  1273. </div>
  1274. <footer class="pt-3">
  1275. <div class="container-fluid">
  1276. <div class="row">
  1277. <!--<nav class="navbar fixed-bottom bg-light">-->
  1278. <div class="container mx-auto">
  1279. <div class="col d-flex justify-content-center">
  1280. <div class="btn-group bg-secondary bg-opacity-25" role="group" aria-label="extra-items">
  1281. <a class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="modal" data-bs-target="#About">About</a>
  1282. <a class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="modal" data-bs-target="#Images">Images</a>
  1283. <a class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="modal" data-bs-target="#Video">Video</a>
  1284. <a class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="modal" data-bs-target="#Code">Code</a>
  1285. </div>
  1286. </div>
  1287. </div>
  1288. <!--</nav>-->
  1289. </div>
  1290. <div class="row mt-2">
  1291. <p class="text-center fs-6 fw-light text-white"><small>&copy; 2022 Kris Windham</small></p>
  1292. </div>
  1293. </div>
  1294. </footer>
  1295. <script src="js/site.js"></script>
  1296. </body>
  1297. </html>