xaloc
/
radio
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

treure fontawesome

This commit is contained in:
Xaloc 2024-02-28 19:36:23 +01:00
parent cb942cfc96
commit e210bd7b3b
9 changed files with 724 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
icons/cor.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

102
icons/pausa.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

86
icons/play.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

233
icons/silenci.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

244
icons/so.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

7
index.html
View File

@ -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>

23
player.css
View File

@ -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;
}

38
player.js
View File

@ -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
})
})

31
style.css
View File

@ -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;
}