web_player/index.html at main · ndlopez/web_player · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Web Audio Player</title>
    <meta charset="utf-8"/>
    <meta name="author" content="DLopez (github.com/ndlopez)">
    <meta name="description" content="Web audio player">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <!--link rel="apple-touch-icon" href="https://raw.githubusercontent.com/ndlopez/NowPlaying/master/assets/play-btn-repo.png" sizes="48x48"-->
    <link rel="apple-touch-icon" href="assets/play_btn.png" sizes="192x192">
    <link rel="stylesheet" type="text/css" href="static/common.css">
    <link rel="stylesheet" type="text/css" href="static/mobile.css">
    <link rel="stylesheet" type="text/css" href="static/estilo.css">
    <!--link rel="stylesheet" type="text/css" href="static/burger.css"-->
    <script src="static/these_stations.js"></script>
  </head>
  <body>
    <button onclick="topFunction()" id="topBtn" type="button" href="#amia"></button>
    <main>
      <section id="artwork" class="col30 float_left">
        <div><img src="assets/phantogram.jpg" height="350px"></div>
      </section><!---->
      <section id="amia" class="col70 float_left" style="height: 100vh;overflow: auto;">
      </section><!---->
    </main>

    <aside id="player2" class="col30 float_left">
      <div id="art_title" class="no_desktop flexy">
        <div class="col_20 float_left padding_10" id="cover_art">
          <img src="assets/phantogram.jpg" width="48" height="48"/>
        </div>
        <div id="cover_title" class="col60 float_left" onclick="openNav()">
          <span>You don't get me high anymore<br/>Phantogram</span>
        </div>
        <div class="col_20 float_left" onclick="stopPlay()">
          <svg id="playBtn" title="[d] key to start stream" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60" stroke="#2e4054" fill="#bed2e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
            <!--circle class="paused" fill="#073642" stroke="#b58900" cx="30" cy="30" r="26"/-->
            <path class="paused" fill="#bed2e0" stroke="#bed2e0" d="M20 40 L20 20 40 20 40 40 Z"/>
          </svg></div>
      </div>
      <div id="controls" class="lexy">
        <div class="flexy" onclick="sleepy()"><!--col_20 float_left -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#b58900" stroke="#bed2e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 2C 9 2 3 7 3 15 3 23 9 29 17 29 25 29 30 23 30 18 19 25 7 13 14 2Z" /></svg>
          <div class="above_svg" id="sleepy_timer"></div>
        </div>
        <div id="reload_this" class="flexy">
          <img src=""/>
          <div class="above_svg" id="id3_timer">03:04</div>
        </div>
        <div class="flexy">
          <svg id="play2" title="[d] key to start stream" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60" stroke="#2e4054" fill="#bed2e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
            <!--circle class="paused" fill="#073642" stroke="#b58900" cx="30" cy="30" r="26"/-->
            <path class="paused" fill="#bed2e0" stroke="#bed2e0" d="M23 40 L23 20 43 30Z">
            <!--path class="paused" fill="#bed2e0" stroke="#bed2e0" d="M20 40 L20 20 40 20 40 40 Z"/-->
          </svg>
        </div>
        <div id="duck_it" class="flexy"></div>
        <div class="flexy">
          <div id="toggle-list" class="no_desktop" onclick="openNav()">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#bed2e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" /></svg>
            <!--img src="assets/list.svg" width="48px"-->
          </div>
          <div id="gifElm" class="equalizer no-audio no_mobil">
            <div><span></span><span></span><span></span><span></span><!--span></span--></div>
          </div>
        </div>
      </div>
    </aside>
    <aside id="stationInfo" class="col30 float_left">
      <div class="progress"><span id="progress-amount"></span></div>
      <div><span class="col15 float_left" id="timer">00:00</span>

      <div class="col70 float_left">
        <span id="title_stat" class="center moving-text">♪ Click/Tap on any station from the list and <em>start</em> streaming LIVE</span></div>
      <!--div class="col70 float_left progress"><span id="progress-amount"></span></div-->
      <!--span id="id3_timer" class="col15 float_left align-right">03:04</span-->
      <span class="col15 float_left align-right">LIVE</span>
    </div>
    </aside>

    <!--LIVE&emsp; script type="module" src="static/multiPlay.js"></script-->
    <script src="static/multiPlay.js"></script>

  </body>
</html>