From e210bd7b3bcbd926b00ceacbfbedecddff1971fb Mon Sep 17 00:00:00 2001
From: Xaloc <xaloc@tutanota.com>
Date: Wed, 28 Feb 2024 19:36:23 +0100
Subject: [PATCH] treure fontawesome

---
 icons/cor.svg     |   1 +
 icons/pausa.svg   | 102 +++++++++++++++++++
 icons/play.svg    |  86 ++++++++++++++++
 icons/silenci.svg | 233 +++++++++++++++++++++++++++++++++++++++++++
 icons/so.svg      | 244 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html        |   7 +-
 player.css        |  23 +++--
 player.js         |  38 +++-----
 style.css         |  31 ++++++
 9 files changed, 724 insertions(+), 41 deletions(-)
 create mode 100644 icons/cor.svg
 create mode 100644 icons/pausa.svg
 create mode 100644 icons/play.svg
 create mode 100644 icons/silenci.svg
 create mode 100644 icons/so.svg

diff --git a/icons/cor.svg b/icons/cor.svg
new file mode 100644
index 0000000..d4d03fa
--- /dev/null
+++ b/icons/cor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z"/></svg>
\ No newline at end of file
diff --git a/icons/pausa.svg b/icons/pausa.svg
new file mode 100644
index 0000000..efdbd12
--- /dev/null
+++ b/icons/pausa.svg
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   id="svg117952"
+   version="1.1"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="pause-lila-2.svg">
+  <defs
+     id="defs117954" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.2085664"
+     inkscape:cx="22.43505"
+     inkscape:cy="97.798428"
+     inkscape:document-units="px"
+     inkscape:current-layer="g117898-1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata117957">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="capa1"
+     transform="translate(-1.9534271,-957.17226)">
+    <g
+       id="g117898-1"
+       transform="translate(-1.4285729,954.76826)"
+       style="fill:#ddafe9;fill-opacity:1">
+      <g
+         id="g981"
+         transform="translate(-76.026989,-103.57501)">
+        <rect
+           style="fill:none;fill-rule:evenodd;stroke-width:1.60888;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+           id="rect960"
+           width="64"
+           height="64"
+           x="79.408989"
+           y="105.97901"
+           ry="0.78914964" />
+        <circle
+           style="fill:#ddafe9;fill-opacity:1;fill-rule:evenodd;stroke-width:1.89059;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+           id="circle962"
+           cx="111.40899"
+           cy="137.97902"
+           r="30" />
+        <g
+           id="g958"
+           transform="translate(66.556747,31.505664)">
+          <rect
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:0.956769;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+             id="rect952"
+             width="5.9453526"
+             height="24.023626"
+             x="34.879562"
+             y="94.461533"
+             ry="2.2546458" />
+          <rect
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:0.956769;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+             id="rect954"
+             width="5.9453526"
+             height="24.023626"
+             x="48.879562"
+             y="94.461533"
+             ry="2.2546458" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/icons/play.svg b/icons/play.svg
new file mode 100644
index 0000000..d56946a
--- /dev/null
+++ b/icons/play.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   id="svg117952"
+   version="1.1"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="play-lila-2.svg">
+  <defs
+     id="defs117954" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.2458035"
+     inkscape:cx="-41.238622"
+     inkscape:cy="29.228476"
+     inkscape:document-units="px"
+     inkscape:current-layer="g117898-1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata117957">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="capa1"
+     transform="translate(-1.9534271,-957.17226)">
+    <g
+       id="g117898-1"
+       transform="translate(-1.4285729,954.76826)"
+       style="fill:#ddafe9;fill-opacity:1">
+      <g
+         id="g951">
+        <rect
+           style="fill:none;fill-rule:evenodd;stroke-width:1.60888;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+           id="rect960"
+           width="64"
+           height="64"
+           x="3.382"
+           y="2.4040015"
+           ry="0.78914964" />
+        <circle
+           style="fill:#ddafe9;fill-opacity:1;fill-rule:evenodd;stroke-width:1.89059;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+           id="circle962"
+           cx="35.382"
+           cy="34.404011"
+           r="30" />
+        <path
+           id="path942"
+           d="m 26.120486,22.264001 v 24.280411 c 0,1.95885 1.37937,2.75969 3.08036,1.78891 L 50.533074,36.161743 c 1.70148,-0.970782 1.70148,-2.544782 0,-3.51507 L 29.200846,20.474601 c -1.70099,-0.970781 -3.08036,-0.169454 -3.08036,1.7894 z"
+           style="fill:#ffffff;fill-opacity:1;stroke-width:0.494039"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/icons/silenci.svg b/icons/silenci.svg
new file mode 100644
index 0000000..86c764a
--- /dev/null
+++ b/icons/silenci.svg
@@ -0,0 +1,233 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   id="svg117952"
+   version="1.1"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="silenci-2.svg">
+  <defs
+     id="defs117954">
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect912"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect880"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1455"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1351"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1300"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1212"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1038"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect968"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1219"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1028"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1716"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1640"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1532"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1920"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect2369"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect2455"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect2467"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.0866182"
+     inkscape:cx="16.906448"
+     inkscape:cy="33.662708"
+     inkscape:document-units="px"
+     inkscape:current-layer="g117898-1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata117957">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="capa1"
+     transform="translate(-1.9534271,-957.17226)">
+    <g
+       id="g117898-1"
+       transform="translate(-1.4285729,954.76826)"
+       style="fill:#ddafe9;fill-opacity:1">
+      <rect
+         style="fill:none;fill-rule:evenodd;stroke-width:1.60888;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+         id="rect960"
+         width="64"
+         height="64"
+         x="3.382"
+         y="2.4040015"
+         ry="0.78914964" />
+      <circle
+         style="fill:#ddafe9;fill-opacity:1;fill-rule:evenodd;stroke-width:1.89059;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+         id="circle962"
+         cx="35.382"
+         cy="34.404011"
+         r="30" />
+      <path
+         d="m 23.297532,41.37623 0.07026,-13.654032 c 5.908237,-0.937256 10.222719,-4.72078 15.00916,-7.624833 l -0.06938,28.613292 C 33.551144,44.485184 28.724208,42.173933 23.297532,41.37623 Z"
+         fill="#ffffff"
+         stroke="none"
+         stroke-width="0.326609"
+         stroke-linecap="round"
+         id="path16"
+         style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         d="m 15.555318,27.721724 h 7.103274 v 13.61461 h -7.103274 z"
+         fill="#ffffff"
+         stroke="none"
+         stroke-width="0.59194"
+         stroke-linecap="butt"
+         id="path18"
+         style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0" />
+      <g
+         id="g1265"
+         transform="translate(84.027391,8.3206276)"
+         style="fill:#ffffff">
+        <g
+           id="g1239"
+           transform="translate(-85.182479,-10.338644)"
+           style="fill:#ffffff;fill-opacity:1">
+          <rect
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.59;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+             id="rect1233"
+             width="1.7673317"
+             height="17.178299"
+             x="59.923729"
+             y="-19.996143"
+             transform="rotate(46.689903)"
+             ry="0.83842587" />
+          <rect
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.59;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+             id="rect855"
+             width="1.7673317"
+             height="17.178299"
+             x="-8.6859474"
+             y="52.784977"
+             transform="matrix(-0.68594659,0.72765189,0.72765189,0.68594659,0,0)"
+             ry="0.83842587" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/icons/so.svg b/icons/so.svg
new file mode 100644
index 0000000..c0fdd9d
--- /dev/null
+++ b/icons/so.svg
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   id="svg117952"
+   version="1.1"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="so-2.svg">
+  <defs
+     id="defs117954">
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect912"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect880"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1455"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1351"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1300"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1212"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1038"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect968"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1219"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1028"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1716"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1640"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1532"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect1920"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       is_visible="true"
+       id="path-effect2369"
+       effect="spiro"
+       lpeversion="0" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect2455"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect2467"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00108696"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4754619"
+     inkscape:cx="31.800289"
+     inkscape:cy="33.425806"
+     inkscape:document-units="px"
+     inkscape:current-layer="g117898-1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata117957">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="capa1"
+     transform="translate(-1.9534271,-957.17226)">
+    <g
+       id="g117898-1"
+       transform="translate(-1.4285729,954.76826)"
+       style="fill:#ddafe9;fill-opacity:1">
+      <rect
+         style="fill:none;fill-rule:evenodd;stroke-width:1.60888;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+         id="rect960"
+         width="64"
+         height="64"
+         x="3.382"
+         y="2.4040015"
+         ry="0.78914964" />
+      <circle
+         style="fill:#ddafe9;fill-opacity:1;fill-rule:evenodd;stroke-width:1.89059;stroke-linecap:square;paint-order:fill markers stroke;stop-color:#000000"
+         id="circle962"
+         cx="35.382"
+         cy="34.404011"
+         r="30" />
+      <g
+         id="g1068"
+         transform="translate(116.95893,31.910491)">
+        <g
+           id="g1191"
+           transform="matrix(0.59193954,0,0,0.59193954,-161.02236,-14.844885)"
+           style="fill:#ffffff;fill-opacity:1">
+          <path
+             d="m 113.79703,41.069438 0.1187,-23.0666 c 9.98115,-1.583364 17.26987,-7.975104 25.3559,-12.8811 l -0.1172,48.3382 c -8.03534,-7.138353 -16.18978,-11.042892 -25.3574,-12.3905 z"
+             fill="#ffffff"
+             stroke="none"
+             stroke-width="0.55176"
+             stroke-linecap="round"
+             id="path16"
+             style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+             sodipodi:nodetypes="ccccc" />
+          <path
+             d="m 100.71763,18.002038 h 12 v 23 h -12 z"
+             fill="#ffffff"
+             stroke="none"
+             stroke-width="1"
+             stroke-linecap="butt"
+             id="path18"
+             style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0" />
+          <path
+             id="path1180"
+             d="m 147.88619,23.165644 c 0,0 1.92205,2.157315 2.21216,6.467913 m -1.3277,6.65782 c 0,0 1.61622,-2.37497 1.3259,-6.685155"
+             fill-rule="evenodd"
+             stroke="#3d7ca6"
+             stroke-linecap="round"
+             stroke-width="1.28169"
+             style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.69008;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             inkscape:export-xdpi="300"
+             inkscape:export-ydpi="300" />
+          <path
+             id="path1182"
+             d="m 153.48171,16.229666 c 0,0 3.84413,4.32129 4.42511,12.941464 m -2.65579,13.315778 c 0,0 3.23257,-4.750229 2.65209,-13.370312"
+             fill-rule="evenodd"
+             stroke="#3d7ca6"
+             stroke-linecap="round"
+             stroke-width="1.28169"
+             style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.69008;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             inkscape:export-xdpi="300"
+             inkscape:export-ydpi="300" />
+          <path
+             id="path1184"
+             d="m 159.6208,9.2658131 c 0,0 5.77033,6.4735579 6.64154,19.4038479 m -3.98778,19.979469 c 0,0 4.85357,-7.130634 3.98239,-20.060912"
+             fill-rule="evenodd"
+             stroke="#3d7ca6"
+             stroke-linecap="round"
+             stroke-width="1.28169"
+             style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.69008;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             inkscape:export-xdpi="300"
+             inkscape:export-ydpi="300" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 1e13817..373e83a 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,6 @@
 		<meta charset="UTF-8">
 		<meta name="author" content="Xaloc">
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
-		<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 		<link rel="stylesheet" href="style.css">
 		<link rel="stylesheet" href="player.css">
 		<title>Ràdios</title>
@@ -50,7 +49,7 @@
 			</audio>
 			<div class="player-controls">
 				<button name="play-pause" class="button play-pause-button" aria-label="Play/pause">
-				  <i class="fas fa-play" aria-hidden></i>
+				  <i class="icon icon-play" aria-hidden></i>
 				</button>
 			  
 				<div class="volume-and-title">
@@ -60,7 +59,7 @@
 			  
 				  <div class="volume-controls">
 					<button name="mute" class="button mute-button" aria-label="Mute/unmute">
-					  <i class="fas fa-volume-down" aria-hidden></i>
+					  <i class="icon icon-so" aria-hidden></i>
 					</button>
 			  
 					<input type="range" name="volume" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume">
@@ -71,7 +70,7 @@
 
 	
 		<footer>
-			Fet amb <i class="fa fa-heart"></i> per <a href=https://fedi.xaloc.space/xaloc> Xaloc</a>. El codi font i la llicència <a href=https://git.xaloc.space/xaloc/radio/> aquí</a>.
+			Fet amb <i class="icon icon-cor" style="display: inline-block;"></i> per <a href=https://fedi.xaloc.space/xaloc> Xaloc</a>. El codi font i la llicència <a href=https://git.xaloc.space/xaloc/radio/> aquí</a>.
 		</footer>
 	
 	<script>
diff --git a/player.css b/player.css
index 4ac2e71..b344beb 100644
--- a/player.css
+++ b/player.css
@@ -3,26 +3,25 @@
     width: 30%;
   }
 .button {
-    vertical-align: middle;
+    vertical-align: left;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: left;
+    justify-content: left;
     cursor: pointer;
     border: none;
-    background-color: #a514aa;
+    /* background-color: #a514aa; */
     color: #fff;
     border-radius: 100%;
   }
 .play-pause-button {
-    width: 70px;
-    height: 70px;
-    font-size: 25px;
-    margin-right: 24px;
+    /* width: 38px; */
+    /* height: 35px; */
+    margin-right: 30px;
   }
 .mute-button {
-    width: 30px;
-    height: 30px;
-    margin-right: 12px;
+    /* width: 30px; */
+    /* height: 30px; */
+    margin-right: 30px;
   }
 .player-controls {
     display: flex;
@@ -69,4 +68,4 @@ input[type="range"]:focus {
     border-radius: 50px;
     box-shadow: 0 0 15px -4px #a514aa;
   }
-  
\ No newline at end of file
+  
diff --git a/player.js b/player.js
index cb5a573..37751e6 100644
--- a/player.js
+++ b/player.js
@@ -1,10 +1,10 @@
 const audio = document.querySelector('#stream')
 const playPauseButton = document.querySelector('[name="play-pause"]')
-const playPauseButtonIcon = playPauseButton.querySelector('i.fas')
+const playPauseButtonIcon = playPauseButton.querySelector('i.icon')
 const volumeControl = document.querySelector('[name="volume"]')
 const currentlyPlaying = document.querySelector('.currently-playing-title')
 const volumeButton = document.querySelector('[name="mute"]')
-const volumeButtonIcon = volumeButton.querySelector('i.fas')
+const volumeButtonIcon = volumeButton.querySelector('i.icon')
 
 let isPlaying = false
 let fetchInterval = null
@@ -12,26 +12,14 @@ let currentVolume = 0.2
 
 audio.volume = currentVolume
 const adjustVolumeIcon = volume => {
-    volumeButtonIcon.classList.remove('fa-volume-off')
-    volumeButtonIcon.classList.remove('fa-volume-down')
-    volumeButtonIcon.classList.remove('fa-volume-up')
-    volumeButtonIcon.classList.remove('fa-volume-mute')
-  
-    if (volume >= 0.75) {
-      volumeButtonIcon.classList.add('fa-volume-up')
-    }
-  
-    if (volume < 0.75 && volume >= 0.2) {
-      volumeButtonIcon.classList.add('fa-volume-down')
-    }
-  
-    if (volume < 0.2 && volume > 0) {
-      volumeButtonIcon.classList.add('fa-volume-off')
-    }
+    volumeButtonIcon.classList.remove('icon-silenci')
+    volumeButtonIcon.classList.remove('icon-so')
   
     if (volume === 0) {
-      volumeButtonIcon.classList.add('fa-volume-mute')
-    }
+      volumeButtonIcon.classList.add('icon-silenci')
+    } else {
+      volumeButtonIcon.classList.add('icon-so')
+  }
 }
 volumeControl.addEventListener('input', () => {
     const volume = parseFloat(volumeControl.value)
@@ -58,14 +46,14 @@ playPauseButton.addEventListener('click', () => {
     if (isPlaying) {
       audio.pause()
   
-      playPauseButtonIcon.classList.remove('fa-pause')
-      playPauseButtonIcon.classList.add('fa-play')
+      playPauseButtonIcon.classList.remove('icon-pausa')
+      playPauseButtonIcon.classList.add('icon-play')
 
     } else {
       audio.play()
   
-      playPauseButtonIcon.classList.remove('fa-play')
-      playPauseButtonIcon.classList.add('fa-pause')
+      playPauseButtonIcon.classList.remove('icon-play')
+      playPauseButtonIcon.classList.add('icon-pausa')
     }
     isPlaying = !isPlaying
-})
\ No newline at end of file
+})
diff --git a/style.css b/style.css
index 0168eb3..8a5dee0 100644
--- a/style.css
+++ b/style.css
@@ -52,3 +52,34 @@ footer {
   margin-top: 2rem;
   padding: 1rem;
 }
+
+.icon {
+    width: 30px;
+    height: 30px;
+    background-size: 30px;
+}
+
+.icon-play {
+    background-image: url(icons/play.svg);
+    background-repeat: no-repeat;
+}
+
+.icon-pausa {
+    background-image: url(icons/pausa.svg);
+    background-repeat: no-repeat;
+}
+
+.icon-silenci {
+    background-image: url(icons/silenci.svg);
+    background-repeat: no-repeat;
+}
+
+.icon-so {
+    background-image: url(icons/so.svg);
+    background-repeat: no-repeat;
+}
+
+.icon-cor {
+    background-image: url(icons/cor.svg);
+    background-repeat: no-repeat;
+}