web_player/fmlapaz.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
<!DOCTYPE html>
<html>
  <head>
    <title>Now on FM La Paz</title>
    <meta charset="utf-8"/>
    <meta name="description" content="Internet audio player">
    <meta name="author" content="DLopez (github.com/ndlopez)">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="static/get_fmLaPaz.js"></script>
    <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/vinyl-like.css"-->
  </head>
  <body>
    <button id="topBtn" type="button" href="#playList" style="display: none;"></button>
    <header id="nowLabel"></header>
    <main id="music">
      <div id="playList" class="float_left"><h2 class="col90 float_left">Recently listened</h2>
        <a id='downLink' class="col10 float_left"></a></div>
      <div id="nowPlaying" class="float_left bkg_cd_case"><img src="assets/loading.svg" width="300"/></div>
    </main>
    <div id="player" style="position: fixed;bottom: 0;z-index: 100;float:none;box-sizing: content-box;width: 100vw;">
      <div class="col_50 float_left lexy">
        <div class="flexy">
          <label for="vol_input" onclick="volume_mute(0)">
            <!--svg id="vol_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <path fill="#bed2e0" d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z"/>
              <path d="M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28"/>
            </svg--><img id="vol_icon" src="assets/volume-svgrepo.svg" width="38"/></label>
          <!--input id="vol_input" type="range" min="0" max="100" value="80" step="10" oninput="audioConnect.volume = this.value/100" onchange="this.oninput()"-->
        </div>
        <div class="flexy"><!--prev. col_20 float_left-->
          <svg id="stop" title="[s] key to stop stream" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#bed2e0" stroke="#bed2e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
              <path d= "M5 9 L5 29 27 29 27 9 Z"/><!--"M8 8 L8 24 24 24 24 8Z"--></svg>
        </div>
        <div class="flexy">
          <svg id="play" 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" cx="30" cy="30" r="26"/>
            <path class="paused" fill="#2e4054" d="M23 40 L23 20 43 30Z"/></svg>
        </div>
        <a id="duck_it" title="More info" target="_blank" class="flexy">
          <svg id="next_play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42" fill="#bed2e0" stroke="#bed2e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
          <!--path d="M9 25 L25 16 9 7Z M25 25 L25 7"//"M15 28 L15 14 25 21Z M28 28 L28 14">
          <circle stroke-width="0" cx="21" cy="21" r="20"/-->
          <path d= "M12 30 L12 10 30 20Z M31 30 L31 10"/></svg>
        </a>
        <div class="flexy">
          <a title="reload id3-tag" onclick="reloadMe()">
            <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="2"><path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2" /></svg></a>
        </div>

      </div>
      <div class="col_40 no_mobil float_left">
        <!--img src="assets/download.svg"/-->
        <span id="now_song">Alive and Kicking<br/>Simple Minds</span></div>
      <div class="col10 float_left no_mobil">
        <div id="gifElm" class="equalizer no-audio">
          <div><span></span><span></span><span></span><span></span><!--span></span--></div>
        </div></div>
      <!--li><a href="#"><button id="record">record</button></a></li-->
    </div>
    <div id="station_info"><span id="timerr" class="col15 float_left">00:00</span>
      <div class="col70 float_left"><span id="title_stat" class="moving-text">♪ Requesting data from the server...</span></div>
      <span class="col15 float_left align-right">LIVE &ensp;</span>
    </div>
    <!--audio id="recordedAudio">to play recorded audio</audio-->
    <script src="static/audioPlay.js"></script>
  </body>
</html>