index.html


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

<!doctype html>

<!--
 * EchoClip, a web tool to record and play back audio clips.
 * Copyright 2024 Pacien TRAN-GIRARD
 * SPDX-License-Identifier: EUPL-1.2
-->

<html>

<head lang="en-us">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <link rel="icon" href="favicon.svg">
  <link rel="mask-icon" href="favicon.svg" color="#000000">
  <link rel="apple-touch-icon" href="favicon.svg">

  <link rel="stylesheet" href="app.css" type="text/css">

  <title>EchoClip</title>
</head>

<body>
  <header>
    <h1>EchoClip</h1>
    <p>A web tool to record and play back audio clips.</p>
  </header>

  <section id="error">
    <noscript>
      This web application requires JavaScript support to be functional.
    </noscript>
  </section>

  <section>
    <fieldset>
      <legend>Record a new clip</legend>

      <button id="record">
        <span id="recording-indicator">⏺</span>
        Hold (space) to record
      </button>

      <input type="checkbox" id="autoplay" name="autoplay" checked>
      <label for="autoplay">Autoplay</label>
    </fieldset>
  </section>

  <section>
    <fieldset>
      <legend>Saved clips</legend>

      <p>
        Latest on top.
        Hold a number key (1-9) for quick replay.
      </p>

      <button id="clear">Clear all</button>

      <ol id="clips"></ol>
    </fieldset>
  </section>

  <footer>
    <p>Speak, sing, practice, have fun! Nothing is sent out to the network.</p>

    <ul>
      <li><a href="https://pacien.org">&copy; 2024 Pacien</a></li>
      <li><a href="https://cgit.pacien.net/echoclip">Source code (EUPL)</a></li>
      <li><a href="https://www.paypal.com/paypalme/pacien/10">Donate</a></li>
    </ul>
  </footer>

  <script src="app.js"></script>
</body>

</html>