circular-player/index.html at master · frumbert/circular-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
<!doctype html>
<html lang=en-us>
<head>
	<meta charset=utf-8>
	<title>Circular audio player</title>
</head>

<body>
<h1>Circular Audio Player</h1>
<p>A player is a circle. In the paused/stopped state, it has a triangle play button. In the playing state, it has two rectangles representing pause. These are built into the SVG. You can mousewheel/touch-drag to scrub through the audio.</p>
<p>The dimensions, width of progress bar and interaction colour is set by the initialiser. Only one instance can play at a time on the page - it pauses other instances automatically.</p>

<div class='mp3' data-src='example.mp3'></div>

<p><pre>
  &lt;script src="circularAudioPlayer.js">&lt;/script>
  &lt;script>
    document.querySelectorAll(".mp3").forEach((mp3,index) => {
      new CircularAudioPlayer(mp3, mp3.dataset.src, {
        size: 32,
        lineColor: "#007bff",
        lineWidth: 2
      });
    });
  &lt;/script>
</pre></p>

<div class='alt' data-src='https://www.frumbert.org/mp3/strange%20attractor.mp3'></div>

<p><pre>
  &lt;script src="circularAudioPlayer.js">&lt;/script>
  &lt;script>
    document.querySelectorAll(".alt").forEach((mp3,index) => {
      new CircularAudioPlayer(mp3, mp3.dataset.src, {
        size: 100,
        lineColor: "orange",
        lineWidth: 10
      });
    });
  &lt;/script>
</pre></p>

<script src="circularAudioPlayer.js"></script>
<script>
    document.querySelectorAll(".mp3").forEach((mp3,index) => {
      new CircularAudioPlayer(mp3, mp3.dataset.src, {
        size: 32,
        lineColor: "#007bff",
        lineWidth: 2
      });
    });

    document.querySelectorAll(".alt").forEach((mp3,index) => {
      new CircularAudioPlayer(mp3, mp3.dataset.src, {
        size: 100,
        lineColor: "orange",
        lineWidth: 10
      });
    });
</script>

</body>
</html>