github.com/serge-v/zero@v1.0.2-0.20220911142406-af4b6a19e68a/examples/audio/player.html (about)

     1  {{define "player"}}
     2  <!doctype html>
     3  <html>
     4  <head>
     5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6  <style>
     7  @media only screen and (orientation: portrait) {
     8      #box {width: 360px;}
     9  }
    10  @media only screen and (orientation: landscape) {
    11      #box {width: 650px;}
    12  }
    13  button {
    14      height: 80px;
    15      width: 158px;
    16      font-family: verdana;
    17      font-size: 26px;
    18      color: gray;
    19      background-color: black;
    20      box-shadow: none;
    21      border: solid 1px green;
    22      vertical-align: top;
    23  }
    24  body{
    25      margin: 0 0 0 0;
    26      font-family: verdana;
    27      font-size: 18px;
    28      color: gray;
    29      background-color: black;
    30  }
    31  #dirPane {
    32      position: absolute;
    33      top: 0px;
    34  }
    35  #title {
    36      font-size: 16px;
    37      width: 316px;
    38      color: lightGreen;
    39  }
    40  </style>
    41  </head>
    42  
    43  <script src="player.js"></script>
    44  <script>
    45  </script>
    46  <body onload="init()">
    47  <div id="box">
    48      <div id="mainPane">
    49          <div>
    50              <button
    51                  id="btnPrev" onclick="playPrev()">PREV</button><button 
    52                  id="btnNext" onclick="playNext()">NEXT</button><button
    53                  id="btnPlay" onclick="audio.play()">PLAY</button><button 
    54                  id="btnPause" onclick="audio.pause()">PAUSE</button>
    55              <button
    56                  id="btnVolumeDown" onclick="volumeDown()">VOL-</button><button 
    57                  id="btnVolumeUp" onclick="volumeUp()">VOL+</button><button
    58                  id="btnBack" onclick="seekBack()">-30</button><button 
    59                  id="btnForward" onclick="seekForward()">+30</button>
    60              <button
    61                  id="btnStatus">--</button><button onclick="openDirPane()">DIR</button><button
    62                  id="title" onClick="showList()">--</button>
    63          </div>
    64      </div>
    65      <div id="dirPane" style="display: none">
    66          <button onclick="addTimer(600, this)">10 MIN</button>
    67          <button onclick="openMainPane()">BACK</button>
    68  
    69      {{range .Dirs -}}
    70      <button onclick="selectDir('{{.}}')">{{.}}</button>
    71      {{- end}}
    72      </div>
    73  
    74      <div id="listPane" style="display: none">
    75          <span style="width: 400px; display: inline-block" onclick="openMainPane()">BACK</span>
    76          <hr>
    77          <div id="songList">--</div>
    78          <hr>
    79          <span style="width: 400px; display: inline-block" onclick="openMainPane()">BACK</span>
    80      </div>
    81  </div>
    82  
    83  <video id="audio" width="0" height="0"></video>
    84  
    85  </body>
    86  
    87  </html>
    88  {{end}}