mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 09:48:44 +00:00
voice previews update
This commit is contained in:
BFlat committed
1 parent
ba7b76cff8
commit
6093eaf8af
5 files changed
+237
-174
No files matched your search
@@ -215,7 +215,7 @@ p {
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.parent {
|
||||
@@ -432,7 +432,7 @@ span.word:after {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: #ffffff12 !important;
|
||||
border-color: #ffffff10 !important;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -521,7 +521,6 @@ span.word:after {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
|
||||
.insights-section {
|
||||
@@ -771,7 +770,9 @@ span.word:after {
|
||||
}
|
||||
|
||||
.voice-preview-text {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-voice-preview {
|
||||
@@ -782,43 +783,6 @@ span.word:after {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.panel-title {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
margin-top: -25px;
|
||||
}
|
||||
.p-lg-4 {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.nav-bg-dark {
|
||||
background-color: #17101c00 !important;
|
||||
}
|
||||
|
||||
.features-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='560' preserveAspectRatio='none' viewBox='0 0 1920 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1087%26quot%3b)' fill='none'%3e%3cpath d='M860 39L1510 38' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M356 89L-827 88' stroke-width='6' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M19 415L-1000 414' stroke-width='6' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M207 30L-1043 29' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1333 95L2384 94' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1471 510L2543 509' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1789 194L985 193' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1512 92L2891 91' stroke-width='6' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M67 447L-1110 446' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1209 230L309 229' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M760 527L-35 526' stroke-width='6' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M52 257L-1362 256' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1269 105L2420 104' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1535 531L2296 530' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1087'%3e%3crect width='1920' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1088'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1089'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: 0 250px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.community-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='500' preserveAspectRatio='none' viewBox='0 0 1920 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1540%26quot%3b)' fill='none'%3e%3cpath d='M863 371L-379 370' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1822 20L2738 19' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M835 407L161 406' stroke-width='8' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1461 280L514 279' stroke-width='8' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M362 385L-283 384' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1321 113L2663 112' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1358 249L54 248' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M66 37L-666 36' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1746 269L363 268' stroke-width='8' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1317 204L759 203' stroke-width='6' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1211 23L121 22' stroke-width='6' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M793 423L1418 422' stroke-width='10' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M23 167L-1078 166' stroke-width='10' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1540'%3e%3crect width='1920' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1541'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1542'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.insights-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='300' preserveAspectRatio='none' viewBox='0 0 1920 300'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1056%26quot%3b)' fill='none'%3e%3cpath d='M0 174.34L10 149.93L20 119.89L30 125.05L40 99.87L50 67.35L60 49.02L70 34.79L80 52.92L90 38.38L100 42.07L110 42.37L120 34.03L130 50.65L140 27.52L150 20.16L160 8.73L170 44.68L180 24.6L190 1.43L200 14.65L210 43.32L220 77.48L230 99.7L240 122.99L250 146.47L260 128.54L270 102.41L280 86.49L290 102.37L300 81.48L310 62.07L320 99.29L330 75.32L340 66.93L350 83.9L360 94.48L370 62.31L380 45.19L390 27.62L400 34.54L410 41.5L420 39.2L430 56.28L440 80.96L450 58.21L460 65.28L470 93.02L480 88.25L490 107.02L500 81.06L510 84.94L520 75.08L530 40.79L540 36.65L550 64.85L560 37.29L570 68.66L580 34.8L590 57.92L600 74.39L610 55.74L620 52.09L630 70.43L640 49.43L650 71.76L660 73.23L670 77.8L680 106.27L690 85.99L700 89.94L710 112.08L720 108.17L730 127.84L740 120.67L750 102.28L760 114.63L770 111.79L780 96.92L790 65.31L800 90.52L810 76.31L820 72.63L830 57.46L840 24.02L850 27.97L860 8.13L870 23.64L880 36.56L890 43.68L900 10.09L910 18.34L920 36.36L930 60.86L940 87.39L950 93.49L960 60.46L970 87.07L980 71.1L990 102.44L1000 107.22L1010 112.7L1020 83.31L1030 74.86L1040 73.89L1050 48.95L1060 69.19L1070 33.87L1080 52.24L1090 73.78L1100 55.45L1110 69.19L1120 64.06L1130 44.4L1140 9.34L1150 29.02L1160 26.59L1170 36.77L1180 4.52L1190 25.85L1200 39.02L1210 34.71L1220 19.43L1230 35.84L1240 49.16L1250 40.48L1260 8.93L1270 39.55L1280 58.26L1290 82.39L1300 88.4L1310 100.17L1320 106.31L1330 134.08L1340 124.71L1350 101.84L1360 119.43L1370 95.32L1380 74.16L1390 82.91L1400 77.55L1410 103.99L1420 118.62L1430 85.24L1440 100.32L1450 135.6L1460 100.46L1470 88.25L1480 55.22L1490 81.67L1500 86.48L1510 52.36L1520 70.19L1530 73.09L1540 74.23L1550 52.86L1560 85.95L1570 65.98L1580 37.35L1590 7.69L1600 14.92L1610 6.87L1620 9.55L1630 25.73L1640 23.25L1650 36.63L1660 27.09L1670 5.76L1680 32.72L1690 3.81L1700 27.06L1710 11.67L1720 26.98L1730 51.06L1740 18.55L1750 32.88L1760 59.11L1770 87.91L1780 66.47L1790 39.44L1800 42.68L1810 73.69L1820 36.63L1830 60.41L1840 70.38L1850 88.57L1860 58.79L1870 84.45L1880 89.09L1890 63.22L1900 26.84L1910 60.71L1920 23.99' stroke='rgba(207%2c 76%2c 84%2c 0.1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 174.34L10 149.93L20 119.89L30 125.05L40 99.87L50 67.35L60 49.02L70 34.79L80 52.92L90 38.38L100 42.07L110 42.37L120 34.03L130 50.65L140 27.52L150 20.16L160 8.73L170 44.68L180 24.6L190 1.43L200 14.65L210 43.32L220 77.48L230 99.7L240 122.99L250 146.47L260 128.54L270 102.41L280 86.49L290 102.37L300 81.48L310 62.07L320 99.29L330 75.32L340 66.93L350 83.9L360 94.48L370 62.31L380 45.19L390 27.62L400 34.54L410 41.5L420 39.2L430 56.28L440 80.96L450 58.21L460 65.28L470 93.02L480 88.25L490 107.02L500 81.06L510 84.94L520 75.08L530 40.79L540 36.65L550 64.85L560 37.29L570 68.66L580 34.8L590 57.92L600 74.39L610 55.74L620 52.09L630 70.43L640 49.43L650 71.76L660 73.23L670 77.8L680 106.27L690 85.99L700 89.94L710 112.08L720 108.17L730 127.84L740 120.67L750 102.28L760 114.63L770 111.79L780 96.92L790 65.31L800 90.52L810 76.31L820 72.63L830 57.46L840 24.02L850 27.97L860 8.13L870 23.64L880 36.56L890 43.68L900 10.09L910 18.34L920 36.36L930 60.86L940 87.39L950 93.49L960 60.46L970 87.07L980 71.1L990 102.44L1000 107.22L1010 112.7L1020 83.31L1030 74.86L1040 73.89L1050 48.95L1060 69.19L1070 33.87L1080 52.24L1090 73.78L1100 55.45L1110 69.19L1120 64.06L1130 44.4L1140 9.34L1150 29.02L1160 26.59L1170 36.77L1180 4.52L1190 25.85L1200 39.02L1210 34.71L1220 19.43L1230 35.84L1240 49.16L1250 40.48L1260 8.93L1270 39.55L1280 58.26L1290 82.39L1300 88.4L1310 100.17L1320 106.31L1330 134.08L1340 124.71L1350 101.84L1360 119.43L1370 95.32L1380 74.16L1390 82.91L1400 77.55L1410 103.99L1420 118.62L1430 85.24L1440 100.32L1450 135.6L1460 100.46L1470 88.25L1480 55.22L1490 81.67L1500 86.48L1510 52.36L1520 70.19L1530 73.09L1540 74.23L1550 52.86L1560 85.95L1570 65.98L1580 37.35L1590 7.69L1600 14.92L1610 6.87L1620 9.55L1630 25.73L1640 23.25L1650 36.63L1660 27.09L1670 5.76L1680 32.72L1690 3.81L1700 27.06L1710 11.67L1720 26.98L1730 51.06L1740 18.55L1750 32.88L1760 59.11L1770 87.91L1780 66.47L1790 39.44L1800 42.68L1810 73.69L1820 36.63L1830 60.41L1840 70.38L1850 88.57L1860 58.79L1870 84.45L1880 89.09L1890 63.22L1900 26.84L1910 60.71L1920 23.99L1920 300L0 300z' fill='url(%23SvgjsLinearGradient1057)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1056'%3e%3crect width='1920' height='300' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='SvgjsLinearGradient1057'%3e%3cstop stop-opacity='0.65' stop-color='rgba(207%2c 76%2c 84%2c 0.05)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(255%2c 255%2c 255%2c 0.05)' offset='0.8'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container-panel {
|
||||
width: 100%;
|
||||
@@ -860,4 +824,60 @@ span.word:after {
|
||||
max-width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.voice-preview-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.panel-title {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
margin-top: -25px;
|
||||
}
|
||||
.p-lg-4 {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.nav-bg-dark {
|
||||
background-color: #17101c00 !important;
|
||||
}
|
||||
|
||||
.features-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='560' preserveAspectRatio='none' viewBox='0 0 1920 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1087%26quot%3b)' fill='none'%3e%3cpath d='M860 39L1510 38' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M356 89L-827 88' stroke-width='6' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M19 415L-1000 414' stroke-width='6' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M207 30L-1043 29' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1333 95L2384 94' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1471 510L2543 509' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1789 194L985 193' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1512 92L2891 91' stroke-width='6' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M67 447L-1110 446' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1209 230L309 229' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M760 527L-35 526' stroke-width='6' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M52 257L-1362 256' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1269 105L2420 104' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1535 531L2296 530' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1087'%3e%3crect width='1920' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1088'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1089'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: 0 250px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.voices-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3cpath d='M -470.4799303954471%2c120 C -422.48%2c165.4 -326.48%2c348 -230.47993039544713%2c347 C -134.48%2c346 -86.48%2c124.8 9.520069604552873%2c115 C 105.52%2c105.2 153.52%2c266.2 249.52006960455287%2c298 C 345.52%2c329.8 393.52%2c259.4 489.5200696045529%2c274 C 585.52%2c288.6 633.52%2c379.2 729.5200696045529%2c371 C 825.52%2c362.8 873.52%2c233.4 969.5200696045529%2c233 C 1065.52%2c232.6 1115.42%2c379.8 1209.5200696045529%2c369 C 1303.62%2c358.2 1393.9%2c217 1440%2c179' stroke='rgba(247%2c 84%2c 92%2c 0.08)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -173.39417306836023%2c447 C -125.39%2c383.6 -29.39%2c161.8 66.60582693163977%2c130 C 162.61%2c98.2 210.61%2c278 306.60582693163974%2c288 C 402.61%2c298 450.61%2c166.8 546.6058269316397%2c180 C 642.61%2c193.2 690.61%2c337.2 786.6058269316397%2c354 C 882.61%2c370.8 930.61%2c255 1026.6058269316397%2c264 C 1122.61%2c273 1170.61%2c427.4 1266.6058269316397%2c399 C 1362.61%2c370.6 1471.93%2c142.4 1506.6058269316397%2c122 C 1541.28%2c101.6 1453.32%2c262 1440%2c297' stroke='rgba(247%2c 84%2c 92%2c 0.08)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -250.53447353119677%2c366 C -202.53%2c330 -106.53%2c202 -10.53447353119676%2c186 C 85.47%2c170 133.47%2c300 229.46552646880323%2c286 C 325.47%2c272 373.47%2c109.8 469.46552646880326%2c116 C 565.47%2c122.2 613.47%2c296.4 709.4655264688032%2c317 C 805.47%2c337.6 853.47%2c207.4 949.4655264688032%2c219 C 1045.47%2c230.6 1093.47%2c376.8 1189.4655264688033%2c375 C 1285.47%2c373.2 1379.36%2c196.8 1429.4655264688033%2c210 C 1479.57%2c223.2 1437.89%2c394.8 1440%2c441' stroke='rgba(247%2c 84%2c 92%2c 0.08)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: 0 55%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.community-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='500' preserveAspectRatio='none' viewBox='0 0 1920 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1540%26quot%3b)' fill='none'%3e%3cpath d='M863 371L-379 370' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1822 20L2738 19' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M835 407L161 406' stroke-width='8' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1461 280L514 279' stroke-width='8' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M362 385L-283 384' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1321 113L2663 112' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1358 249L54 248' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M66 37L-666 36' stroke-width='6' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1746 269L363 268' stroke-width='8' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1317 204L759 203' stroke-width='6' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1211 23L121 22' stroke-width='6' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M793 423L1418 422' stroke-width='10' stroke='url(%23SvgjsLinearGradient1541)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M23 167L-1078 166' stroke-width='10' stroke='url(%23SvgjsLinearGradient1542)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1540'%3e%3crect width='1920' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1541'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1542'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.05)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.insights-bg {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='300' preserveAspectRatio='none' viewBox='0 0 1920 300'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1056%26quot%3b)' fill='none'%3e%3cpath d='M0 174.34L10 149.93L20 119.89L30 125.05L40 99.87L50 67.35L60 49.02L70 34.79L80 52.92L90 38.38L100 42.07L110 42.37L120 34.03L130 50.65L140 27.52L150 20.16L160 8.73L170 44.68L180 24.6L190 1.43L200 14.65L210 43.32L220 77.48L230 99.7L240 122.99L250 146.47L260 128.54L270 102.41L280 86.49L290 102.37L300 81.48L310 62.07L320 99.29L330 75.32L340 66.93L350 83.9L360 94.48L370 62.31L380 45.19L390 27.62L400 34.54L410 41.5L420 39.2L430 56.28L440 80.96L450 58.21L460 65.28L470 93.02L480 88.25L490 107.02L500 81.06L510 84.94L520 75.08L530 40.79L540 36.65L550 64.85L560 37.29L570 68.66L580 34.8L590 57.92L600 74.39L610 55.74L620 52.09L630 70.43L640 49.43L650 71.76L660 73.23L670 77.8L680 106.27L690 85.99L700 89.94L710 112.08L720 108.17L730 127.84L740 120.67L750 102.28L760 114.63L770 111.79L780 96.92L790 65.31L800 90.52L810 76.31L820 72.63L830 57.46L840 24.02L850 27.97L860 8.13L870 23.64L880 36.56L890 43.68L900 10.09L910 18.34L920 36.36L930 60.86L940 87.39L950 93.49L960 60.46L970 87.07L980 71.1L990 102.44L1000 107.22L1010 112.7L1020 83.31L1030 74.86L1040 73.89L1050 48.95L1060 69.19L1070 33.87L1080 52.24L1090 73.78L1100 55.45L1110 69.19L1120 64.06L1130 44.4L1140 9.34L1150 29.02L1160 26.59L1170 36.77L1180 4.52L1190 25.85L1200 39.02L1210 34.71L1220 19.43L1230 35.84L1240 49.16L1250 40.48L1260 8.93L1270 39.55L1280 58.26L1290 82.39L1300 88.4L1310 100.17L1320 106.31L1330 134.08L1340 124.71L1350 101.84L1360 119.43L1370 95.32L1380 74.16L1390 82.91L1400 77.55L1410 103.99L1420 118.62L1430 85.24L1440 100.32L1450 135.6L1460 100.46L1470 88.25L1480 55.22L1490 81.67L1500 86.48L1510 52.36L1520 70.19L1530 73.09L1540 74.23L1550 52.86L1560 85.95L1570 65.98L1580 37.35L1590 7.69L1600 14.92L1610 6.87L1620 9.55L1630 25.73L1640 23.25L1650 36.63L1660 27.09L1670 5.76L1680 32.72L1690 3.81L1700 27.06L1710 11.67L1720 26.98L1730 51.06L1740 18.55L1750 32.88L1760 59.11L1770 87.91L1780 66.47L1790 39.44L1800 42.68L1810 73.69L1820 36.63L1830 60.41L1840 70.38L1850 88.57L1860 58.79L1870 84.45L1880 89.09L1890 63.22L1900 26.84L1910 60.71L1920 23.99' stroke='rgba(207%2c 76%2c 84%2c 0.1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 174.34L10 149.93L20 119.89L30 125.05L40 99.87L50 67.35L60 49.02L70 34.79L80 52.92L90 38.38L100 42.07L110 42.37L120 34.03L130 50.65L140 27.52L150 20.16L160 8.73L170 44.68L180 24.6L190 1.43L200 14.65L210 43.32L220 77.48L230 99.7L240 122.99L250 146.47L260 128.54L270 102.41L280 86.49L290 102.37L300 81.48L310 62.07L320 99.29L330 75.32L340 66.93L350 83.9L360 94.48L370 62.31L380 45.19L390 27.62L400 34.54L410 41.5L420 39.2L430 56.28L440 80.96L450 58.21L460 65.28L470 93.02L480 88.25L490 107.02L500 81.06L510 84.94L520 75.08L530 40.79L540 36.65L550 64.85L560 37.29L570 68.66L580 34.8L590 57.92L600 74.39L610 55.74L620 52.09L630 70.43L640 49.43L650 71.76L660 73.23L670 77.8L680 106.27L690 85.99L700 89.94L710 112.08L720 108.17L730 127.84L740 120.67L750 102.28L760 114.63L770 111.79L780 96.92L790 65.31L800 90.52L810 76.31L820 72.63L830 57.46L840 24.02L850 27.97L860 8.13L870 23.64L880 36.56L890 43.68L900 10.09L910 18.34L920 36.36L930 60.86L940 87.39L950 93.49L960 60.46L970 87.07L980 71.1L990 102.44L1000 107.22L1010 112.7L1020 83.31L1030 74.86L1040 73.89L1050 48.95L1060 69.19L1070 33.87L1080 52.24L1090 73.78L1100 55.45L1110 69.19L1120 64.06L1130 44.4L1140 9.34L1150 29.02L1160 26.59L1170 36.77L1180 4.52L1190 25.85L1200 39.02L1210 34.71L1220 19.43L1230 35.84L1240 49.16L1250 40.48L1260 8.93L1270 39.55L1280 58.26L1290 82.39L1300 88.4L1310 100.17L1320 106.31L1330 134.08L1340 124.71L1350 101.84L1360 119.43L1370 95.32L1380 74.16L1390 82.91L1400 77.55L1410 103.99L1420 118.62L1430 85.24L1440 100.32L1450 135.6L1460 100.46L1470 88.25L1480 55.22L1490 81.67L1500 86.48L1510 52.36L1520 70.19L1530 73.09L1540 74.23L1550 52.86L1560 85.95L1570 65.98L1580 37.35L1590 7.69L1600 14.92L1610 6.87L1620 9.55L1630 25.73L1640 23.25L1650 36.63L1660 27.09L1670 5.76L1680 32.72L1690 3.81L1700 27.06L1710 11.67L1720 26.98L1730 51.06L1740 18.55L1750 32.88L1760 59.11L1770 87.91L1780 66.47L1790 39.44L1800 42.68L1810 73.69L1820 36.63L1830 60.41L1840 70.38L1850 88.57L1860 58.79L1870 84.45L1880 89.09L1890 63.22L1900 26.84L1910 60.71L1920 23.99L1920 300L0 300z' fill='url(%23SvgjsLinearGradient1057)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1056'%3e%3crect width='1920' height='300' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='SvgjsLinearGradient1057'%3e%3cstop stop-opacity='0.65' stop-color='rgba(207%2c 76%2c 84%2c 0.05)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(255%2c 255%2c 255%2c 0.05)' offset='0.8'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.voice-preview-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
|
||||
interface Props {
|
||||
filename: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
function AudioSampleButton(props: Props) {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [position, setPosition] = useState(0);
|
||||
|
||||
const handleTogglePlay = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={handleTogglePlay}></button>
|
||||
<Wavesurfer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,28 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faArrowRight,
|
||||
faHeadphones,
|
||||
faLongArrowAltRight,
|
||||
faMicrophone,
|
||||
faPlay,
|
||||
faVolumeUp,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faDiscord } from "@fortawesome/free-brands-svg-icons";
|
||||
import VoicePreviewPlayer from "./VoicePreviewPlayer";
|
||||
import { VoicePreviewPlayer } from "./VoicePreviewPlayer";
|
||||
import { wavesurferConfigs } from "./wsConfig";
|
||||
|
||||
interface Props {
|
||||
sessionWrapper: SessionWrapper;
|
||||
}
|
||||
|
||||
let wavesurfers = wavesurferConfigs.map((config) => {
|
||||
let ws = (
|
||||
<VoicePreviewPlayer filename={config.filename} title={config.title} />
|
||||
);
|
||||
return ws;
|
||||
});
|
||||
|
||||
function IndexPage(props: Props) {
|
||||
return (
|
||||
<div>
|
||||
@@ -55,19 +63,21 @@ function IndexPage(props: Props) {
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div className="panel hero-floating-panel hero-floating-panel-left d-none d-lg-block">
|
||||
<h6 className="pb-0">
|
||||
<i className="fa-solid fa-volume-high me-2"></i>Tracer
|
||||
(Overwatch)
|
||||
</h6>
|
||||
<p className="hero-floating-panel-text">
|
||||
“Look out world! Tracer's here.”
|
||||
</p>
|
||||
</div>
|
||||
{
|
||||
<div className="panel hero-floating-panel hero-floating-panel-left d-none d-lg-block">
|
||||
<h6 className="pb-0">
|
||||
<FontAwesomeIcon icon={faMicrophone} className="me-2" />
|
||||
Tracer (Overwatch)
|
||||
</h6>
|
||||
<p className="hero-floating-panel-text">
|
||||
“Look out world! Tracer's here.”
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
<div className="panel hero-floating-panel hero-floating-panel-right d-none d-lg-block">
|
||||
<h6 className="pb-0">
|
||||
<i className="fa-solid fa-volume-high me-2"></i>Sonic the
|
||||
Hedgehog
|
||||
<FontAwesomeIcon icon={faMicrophone} className="me-2" />
|
||||
Sonic the Hedgehog
|
||||
</h6>
|
||||
<p className="hero-floating-panel-text">
|
||||
"This is what speed looks like."
|
||||
@@ -104,6 +114,7 @@ function IndexPage(props: Props) {
|
||||
</p>
|
||||
<a className="fw-bold" href="">
|
||||
Sign up now
|
||||
<FontAwesomeIcon icon={faArrowRight} className="ms-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -115,13 +126,14 @@ function IndexPage(props: Props) {
|
||||
alt=""
|
||||
width="80"
|
||||
/>
|
||||
<h4 className="features-title mb-3">Over 1700 voices!</h4>
|
||||
<h4 className="features-title mb-3">Over 2000 voices!</h4>
|
||||
<p className="mb-4">
|
||||
Morbi dapibus commodo porta. Sed faucibus tristique orci in
|
||||
tristique. Praesent quam nunc, fermentum eu feugiat sit.
|
||||
</p>
|
||||
<a className="fw-bold" href="">
|
||||
See all the voices on FakeYou
|
||||
<FontAwesomeIcon icon={faArrowRight} className="ms-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,6 +152,7 @@ function IndexPage(props: Props) {
|
||||
</p>
|
||||
<a className="fw-bold" href="">
|
||||
Sign up now
|
||||
<FontAwesomeIcon icon={faArrowRight} className="ms-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,27 +165,31 @@ function IndexPage(props: Props) {
|
||||
<div className="container section d-flex flex-column align-items-center">
|
||||
<div className="d-flex justify-content-center align-items-center gap-4">
|
||||
<img className="rotateimg180" src="assets/title-shape.png" alt="" />
|
||||
<h6 className="pre-heading text-center fw-bold pt-2">
|
||||
Our TTS Voices
|
||||
</h6>
|
||||
<h6 className="pre-heading text-center fw-bold pt-2">TTS Voices</h6>
|
||||
<img src="assets/title-shape.png" alt="" />
|
||||
</div>
|
||||
<h1 className="display-5 fw-bold mt-3">
|
||||
<span className="word">Voice Previews</span>
|
||||
</h1>
|
||||
<div className="voices-section">
|
||||
<VoicePreviewPlayer />
|
||||
<div className="mt-5 pt-4">
|
||||
<a
|
||||
className="btn btn-secondary"
|
||||
href="https://fakeyou.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faVolumeUp} className="me-3" />
|
||||
Listen to all 2000+ usable voices on FakeYou
|
||||
<FontAwesomeIcon icon={faLongArrowAltRight} className="ms-2" />
|
||||
</a>
|
||||
<div className="row gx-3 gy-3 gx-lg-4 gy-lg-4">{wavesurfers}</div>
|
||||
<div className="mt-5 pt-2 d-flex flex-column gap-4">
|
||||
<p className="lead">
|
||||
These are just a few samples of the voices available! Listen to
|
||||
<span className="fw-bold"> 2000+</span> more usable voices on
|
||||
our TTS platform FakeYou.
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
className="btn btn-primary"
|
||||
href="https://fakeyou.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faHeadphones} className="me-3" />
|
||||
Listen to 2000+ more voices!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -201,7 +218,7 @@ function IndexPage(props: Props) {
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="panel insights-panel h-100 panel-ani">
|
||||
<h2 className="fw-bold mb-1">+1700</h2>
|
||||
<h2 className="fw-bold mb-1">+2000</h2>
|
||||
<p>TTS Voices in the library (and growing)</p>
|
||||
<hr />
|
||||
<h2 className="fw-bold mb-1">+10K</h2>
|
||||
|
||||
@@ -1,84 +1,82 @@
|
||||
import React from "react";
|
||||
import React, { useState, useCallback } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faMicrophone, faPlay } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faMicrophone,
|
||||
faPause,
|
||||
faPlay,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import Wavesurfer from "react-wavesurfer.js";
|
||||
import AudioSampleButton from "./AudioSampleButton";
|
||||
|
||||
export default class MyComponent extends React.Component<any, any> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
playing: false,
|
||||
pos: 0,
|
||||
};
|
||||
this.handleTogglePlay = this.handleTogglePlay.bind(this);
|
||||
this.handlePosChange = this.handlePosChange.bind(this);
|
||||
}
|
||||
handleTogglePlay() {
|
||||
this.setState({
|
||||
playing: !this.state.playing,
|
||||
});
|
||||
}
|
||||
handlePosChange(e: any) {
|
||||
this.setState({
|
||||
pos: e.originalArgs[0],
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let wavesurferConfigs = [
|
||||
{
|
||||
filename: "/assets/preview/tracer.wav",
|
||||
title: "Tracer (Overwatch)",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/son-goku.wav",
|
||||
title: "Son Goku (Sean Schemmel)",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/stan-lee.wav",
|
||||
title: "Stan Lee",
|
||||
},
|
||||
];
|
||||
|
||||
let wavesurfers = wavesurferConfigs.map((config) => {
|
||||
let ws = (
|
||||
<div className="col-12 col-lg-4">
|
||||
<div className="panel p-3">
|
||||
<div className="d-flex gap-3 align-items-center mb-4">
|
||||
<button
|
||||
className="btn btn-primary btn-voice-preview align-items-center justify-content-center"
|
||||
onClick={() => this.handleTogglePlay()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlay} />
|
||||
</button>
|
||||
<span className="fw-semibold voice-preview-text">
|
||||
<FontAwesomeIcon icon={faMicrophone} className="me-2" />
|
||||
{config.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-100 h-100 my-2">
|
||||
<Wavesurfer
|
||||
src={config.filename}
|
||||
barWidth={2}
|
||||
barRadius={1}
|
||||
barGap={2}
|
||||
barMinHeight={1}
|
||||
barHeight={2}
|
||||
height={20}
|
||||
progressColor="#fc8481"
|
||||
waveColor="#b09e9e"
|
||||
cursorColor="transparent"
|
||||
playing={this.state.playing}
|
||||
responsive={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return ws;
|
||||
});
|
||||
return <div className="row gx-4 gy-4">{wavesurfers}</div>;
|
||||
}
|
||||
interface Props {
|
||||
filename: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
function VoicePreviewPlayer(props: Props) {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [position, setPosition] = useState(0);
|
||||
|
||||
const handleTogglePlay = useCallback(() => {
|
||||
if (!isPlaying) {
|
||||
setIsPlaying(true);
|
||||
} else {
|
||||
setIsPlaying(false);
|
||||
}
|
||||
}, [isPlaying]);
|
||||
|
||||
const handleFinish = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
setPosition(0);
|
||||
return [setIsPlaying, setPosition];
|
||||
}, []);
|
||||
|
||||
let playButtonText = <FontAwesomeIcon icon={faPlay} />;
|
||||
|
||||
if (isPlaying) {
|
||||
playButtonText = (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faPause} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="col-6 col-md-3">
|
||||
<div className="panel p-2 p-lg-3">
|
||||
<div className="d-flex gap-2 gap-md-3 align-items-center">
|
||||
<button
|
||||
className="btn btn-primary btn-voice-preview align-items-center justify-content-center"
|
||||
onClick={() => handleTogglePlay()}
|
||||
>
|
||||
{playButtonText}
|
||||
</button>
|
||||
<span className="fw-semibold voice-preview-text">
|
||||
<FontAwesomeIcon icon={faMicrophone} className="me-2" />
|
||||
{props.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-100 h-100 mt-4 pb-1 d-none d-lg-block">
|
||||
<Wavesurfer
|
||||
onFinish={handleFinish}
|
||||
pos={position}
|
||||
src={props.filename}
|
||||
barWidth={2}
|
||||
barRadius={1}
|
||||
barGap={2}
|
||||
barMinHeight={1}
|
||||
barHeight={2}
|
||||
height={20}
|
||||
progressColor="#fc8481"
|
||||
waveColor="#b09e9e"
|
||||
cursorColor="transparent"
|
||||
playing={isPlaying}
|
||||
responsive={true}
|
||||
normalize={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { VoicePreviewPlayer };
|
||||
@@ -0,0 +1,50 @@
|
||||
export let wavesurferConfigs = [
|
||||
{
|
||||
filename: "/assets/preview/tracer.wav",
|
||||
title: "Tracer",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/son-goku.wav",
|
||||
title: "Son Goku",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/stan-lee.wav",
|
||||
title: "Stan Lee",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
{
|
||||
filename: "/assets/preview/monokuma.wav",
|
||||
title: "Monokuma",
|
||||
},
|
||||
];
|
||||
Reference in new issue
Block a user