Веб-аудио

<?xml version="1.0" encoding="UTF-8"?> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>the-modern-web/web-audio</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="the-modern-web/web-audio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#3C3449" stroke-width="2"> <rect id="mask" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> <g id="karaoke" transform="translate(11.000000, 11.000000)" fill-rule="nonzero"> <path d="M2.81433469,3.16980148 C2.72804517,2.77424438 2.33706991,2.52339406 1.94189478,2.60968357 C1.54633768,2.69597298 1.29586915,3.08656646 1.38215866,3.48212347 L3.74557355,14.3179419 C3.82040876,14.6611907 4.12394906,14.8952413 4.46108889,14.8952413 C4.51301529,14.8952413 4.56532348,14.8895141 4.61801355,14.8780598 C5.01357056,14.7917703 5.26442088,14.4011769 5.17813137,14.0056198 L2.81433469,3.16980148 Z" id="Shape" fill="#594F69"> </path> <path d="M14.6600453,11.9373454 L12.2966304,1.10152697 C12.2103409,0.705969965 11.8189838,0.455119647 11.4241904,0.541409061 C11.0286334,0.627698573 10.777783,1.01829205 10.8640726,1.41384906 L13.2278692,12.2500493 C13.3027044,12.5929163 13.6062447,12.8269669 13.9433846,12.8269669 C13.9949292,12.8269669 14.0476192,12.8216215 14.0999274,12.8097854 C14.4954844,12.7234959 14.7463348,12.3329024 14.6600453,11.9373454 Z" id="Shape" fill="#594F69"> </path> <path d="M5.17698601,14.0002745 C5.48548993,15.4145054 4.5011791,16.4083615 3.08694825,16.7168654 C1.67233561,17.0253693 0.363866606,16.5316866 0.0553626843,15.1174557 C-0.253141237,13.7032249 0.768968982,12.7792405 2.18319983,12.4707365 C3.59743068,12.1626144 4.86848209,12.5860437 5.17698601,14.0002745 Z" id="Shape" fill="#685C79"> </path> <path d="M14.6588998,11.9320001 C14.9674037,13.3462309 13.983093,14.3404688 12.5688621,14.648591 C11.1542495,14.9570949 9.8457805,14.4634122 9.53727658,13.0491813 C9.22877266,11.6349505 10.2508828,10.710966 11.6651136,10.402462 C13.0793445,10.0939581 14.3503959,10.5177692 14.6588998,11.9320001 Z" id="Shape" fill="#685C79"> </path> <path d="M12.7158597,3.02318576 L1.80138805,5.40378216 L1.25768807,2.91093304 C1.17827122,2.54744822 1.40888543,2.18854515 1.77237025,2.1091283 L11.3699731,0.0156542587 C11.733458,-0.0637625924 12.0927428,0.166851725 12.1721597,0.530336544 L12.7158597,3.02318576 Z" id="Shape" fill="#685C79"> </path> <path d="M32.0023183,24.4504631 L15.1277647,41.3250166 C13.3588307,43.0950961 10.4891333,43.0950961 8.71981758,41.3250166 C8.3521328,40.9577137 8.06119218,40.5430661 7.84585033,40.1005463 C7.84585033,40.0982554 7.84508676,40.0963463 7.8439413,40.0944373 C7.02686408,38.4064474 7.31895007,36.3167915 8.71981758,34.9170695 L25.5943711,18.0425159 L32.0023183,24.4504631 Z" id="Shape" fill="#FF2C5C"> </path> <path d="M32.0023183,24.4504631 L15.1277647,41.3250166 C13.3588307,43.0950961 10.4891333,43.0950961 8.71981758,41.3250166 C8.3521328,40.9577137 8.06119218,40.5430661 7.84585033,40.1005463 C7.84585033,40.0982554 7.84508676,40.0963463 7.8439413,40.0944373 C7.8439413,40.0913828 7.84203226,40.0894738 7.84126859,40.0868011 C9.52314957,40.8844059 11.5944785,40.5869745 12.9861824,39.196416 L29.860736,22.3218624 L29.8618815,22.3100262 L32.0023183,24.4504631 Z" id="Shape" fill="#E62753"> </path> <path d="M19.5422726,32.0691354 L17.9756988,30.5025616 C17.8183923,30.3452552 17.8183923,30.0902049 17.9756988,29.9328984 L21.6781276,26.2304696 C21.8354341,26.0731631 22.0904844,26.0731631 22.2477908,26.2304696 L23.8143646,27.7970434 C23.9716711,27.9543498 23.9716711,28.2094001 23.8143646,28.3667065 L20.1119358,32.0691354 C19.9546293,32.2264418 19.699579,32.2264418 19.5422726,32.0691354 Z" id="Shape" fill="#685C79"> </path> <path d="M21.9629593,30.2177301 L19.8271041,28.0818749 L21.6785094,26.2304696 C21.835816,26.0731631 22.0904844,26.0731631 22.2481727,26.2304696 L23.8143646,27.7970434 C23.9716711,27.9543498 23.9716711,28.2094001 23.8143646,28.3667065 L21.9629593,30.2177301 Z" id="Shape" fill="#FFD659"> </path> <path d="M38.9089116,23.2401197 C35.1732651,26.9757662 32.11648,29.9760432 26.0926355,23.9521986 C20.068791,17.9279724 23.069068,14.871569 26.8047145,11.1359225 C30.540361,7.39989417 34.5348758,5.33772874 39.6209907,10.4238435 C44.7071054,15.5099583 42.6445581,19.5044732 38.9089116,23.2401197 Z" id="Shape" fill="#685C79"> </path> <path d="M39.6209907,10.4238435 C39.2395607,10.0424136 38.8646216,9.70221927 38.4950278,9.39906067 C42.2367832,13.9563661 40.2139444,17.6335954 36.7581659,21.0893739 C33.2596246,24.5882971 30.3563277,27.4411948 25.0533438,22.8407446 C25.3649022,23.2000295 25.7104419,23.5700051 26.0926355,23.9521986 C32.11648,29.9760432 35.1732651,26.9757662 38.9089116,23.2401197 C42.6445581,19.5044732 44.7071054,15.5099583 39.6209907,10.4238435 Z" id="Shape" fill="#594F69"> </path> <g id="Group" transform="translate(26.390831, 10.556332)" fill="#50475E"> <path d="M4.4752159,3.43936055 C4.18885711,3.15300167 3.72457398,3.15300167 3.43859698,3.43936055 C3.15223809,3.72533755 3.15223809,4.18962068 3.43859698,4.47597957 C3.72457398,4.76233836 4.18885711,4.76233836 4.4752159,4.47597957 C4.76157479,4.18962068 4.76157479,3.72533755 4.4752159,3.43936055 Z" id="Shape"> </path> <path d="M7.0665725,6.03071716 C6.7805955,5.74435827 6.31631237,5.74435827 6.02995348,6.03071716 C5.74359469,6.31707595 5.74359469,6.78135908 6.02995348,7.06733618 C6.31631237,7.35369496 6.7805955,7.35369496 7.0665725,7.06733618 C7.35293129,6.78135908 7.35293129,6.31707595 7.0665725,6.03071716 Z" id="Shape"> </path> <path d="M9.65831089,8.62245555 C9.37195201,8.33609666 8.90766888,8.33609666 8.62169188,8.62245555 C8.33533309,8.90881434 8.33533309,9.37271568 8.62169188,9.65907447 C8.90766888,9.94543336 9.37195201,9.94543336 9.65831089,9.65907447 C9.94466978,9.37271568 9.94466978,8.90881434 9.65831089,8.62245555 Z" id="Shape"> </path> <path d="M12.6688968,2.98538637 C12.382538,2.69940936 11.9182549,2.69940936 11.6322778,2.98538637 C11.345919,3.27174515 11.345919,3.73602828 11.6322778,4.02238717 C11.9182549,4.30836417 12.382538,4.30836417 12.6688968,4.02238717 C12.9552557,3.73602828 12.9552557,3.27174515 12.6688968,2.98538637 Z" id="Shape"> </path> <path d="M10.1149578,0.431447267 C9.828599,0.145088478 9.36469766,0.145088478 9.07833877,0.431447267 C8.79197998,0.717806154 8.79197998,1.18208928 9.07833877,1.46844817 C9.36469766,1.75442517 9.828599,1.75442517 10.1149578,1.46844817 C10.4013166,1.18208928 10.4013166,0.717806154 10.1149578,0.431447267 Z" id="Shape"> </path> <path d="M4.02124171,11.6326597 C3.73526471,11.3466827 3.27098158,11.3466827 2.98462269,11.6326597 C2.6982639,11.9190184 2.6982639,12.3833016 2.98462269,12.6696605 C3.27098158,12.9556375 3.73526471,12.9556375 4.02124171,12.6696605 C4.3076005,12.3833016 4.3076005,11.9190184 4.02124171,11.6326597 Z" id="Shape"> </path> <path d="M1.46730271,9.07872056 C1.18132571,8.79274355 0.71704258,8.79274355 0.430683693,9.07872056 C0.144324806,9.36507944 0.144324806,9.82936257 0.430683693,10.1157215 C0.71704258,10.4020802 1.18132571,10.4020802 1.46730271,10.1157215 C1.7536615,9.82936257 1.7536615,9.36507944 1.46730271,9.07872056 Z" id="Shape"> </path> <path d="M7.62516317,0.289413381 C7.33880428,0.00305449427 6.87452115,0.00305449427 6.58854415,0.289413381 C6.30218526,0.575772171 6.30218526,1.03967351 6.58854415,1.3260323 C6.87452115,1.61239119 7.33880428,1.61239119 7.62516317,1.3260323 C7.91152196,1.03967351 7.91152196,0.575772171 7.62516317,0.289413381 Z" id="Shape"> </path> <path d="M10.2165198,2.88076989 C9.93054267,2.59479289 9.46625954,2.59479289 9.17990075,2.88076989 C8.89354187,3.16712877 8.89354187,3.6314119 9.17990075,3.91777069 C9.46625954,4.2037477 9.93054267,4.2037477 10.2165198,3.91777069 C10.5028786,3.6314119 10.5028786,3.16712877 10.2165198,2.88076989 Z" id="Shape"> </path> <path d="M12.8082581,5.47250828 C12.5218993,5.18614949 12.0576161,5.18614949 11.7716391,5.47250828 C11.4852803,5.75886717 11.4852803,6.2231503 11.7716391,6.5091273 C12.0576161,6.79548618 12.5218993,6.79548618 12.8082581,6.5091273 C13.094617,6.2231503 13.094617,5.75886717 12.8082581,5.47250828 Z" id="Shape"> </path> <path d="M1.32526873,6.58892594 C1.03890984,6.30256715 0.575008498,6.30256715 0.288649709,6.58892594 C0.00229091958,6.87528482 0.00229091958,7.33956795 0.288649709,7.62554495 C0.575008498,7.91190374 1.03890984,7.91190374 1.32526873,7.62554495 C1.61162752,7.33956795 1.61162752,6.87528482 1.32526873,6.58892594 Z" id="Shape"> </path> <path d="M3.91700712,9.18066433 C3.63064823,8.89430554 3.1663651,8.89430554 2.88000631,9.18066433 C2.59364743,9.46702321 2.59364743,9.93092446 2.88000631,10.2172833 C3.1663651,10.5036422 3.63064823,10.5036422 3.91700712,10.2172833 C4.20298412,9.93092446 4.20298412,9.46702321 3.91700712,9.18066433 Z" id="Shape"> </path> <path d="M6.50836372,11.7724027 C6.22200484,11.4860439 5.75810349,11.4860439 5.4717447,11.7724027 C5.18538582,12.0583798 5.18538582,12.5226629 5.4717447,12.8090217 C5.75810349,13.0953805 6.22200484,13.0953805 6.50836372,12.8090217 C6.79472251,12.5226629 6.79472251,12.0583798 6.50836372,11.7724027 Z" id="Shape"> </path> <path d="M9.89274338,5.76153978 C9.60676628,5.47518099 9.14248315,5.47518099 8.85612436,5.76153978 C8.56976547,6.04789866 8.56976547,6.5118 8.85612436,6.79815879 C9.14248315,7.08451768 9.60676628,7.08451768 9.89274338,6.79815879 C10.1791022,6.5118 10.1791022,6.04789866 9.89274338,5.76153978 Z" id="Shape"> </path> <path d="M12.5196085,8.38802306 C12.2332496,8.10166427 11.7689664,8.10166427 11.4826076,8.38802306 C11.1962488,8.67438195 11.1962488,9.13866508 11.4826076,9.42464208 C11.7689664,9.71100087 12.2332496,9.71100087 12.5196085,9.42464208 C12.8055855,9.13866508 12.8055855,8.67438195 12.5196085,8.38802306 Z" id="Shape"> </path> <path d="M4.70964838,0.578062992 C4.4232895,0.291704203 3.95900637,0.291704203 3.67264758,0.578062992 C3.38667058,0.86442188 3.38667058,1.32832322 3.67264758,1.61468201 C3.95900637,1.9010409 4.4232895,1.9010409 4.70964838,1.61468201 C4.99562538,1.32832322 4.99562538,0.86442188 4.70964838,0.578062992 Z" id="Shape"> </path> <path d="M7.33880428,3.20760077 C7.05282728,2.92124199 6.58854415,2.92124199 6.30218526,3.20760077 C6.01582647,3.49395966 6.01582647,3.957861 6.30218526,4.24421979 C6.58854415,4.53057858 7.05282728,4.53057858 7.33880428,4.24421979 C7.62516317,3.957861 7.62516317,3.49395966 7.33880428,3.20760077 Z" id="Shape"> </path> <path d="M6.79739522,8.85688793 C6.51103633,8.57052915 6.04713509,8.57052915 5.7607762,8.85688793 C5.47441731,9.14324682 5.47441731,9.60714807 5.7607762,9.89350695 C6.04713509,10.1798658 6.51103633,10.1798658 6.79739522,9.89350695 C7.08375401,9.60714807 7.08375401,9.14324682 6.79739522,8.85688793 Z" id="Shape"> </path> <path d="M9.42387841,11.4833712 C9.13751962,11.1973942 8.67361828,11.1973942 8.38725949,11.4833712 C8.1009006,11.76973 8.1009006,12.2340131 8.38725949,12.520372 C8.67361828,12.806349 9.13751962,12.806349 9.42387841,12.520372 C9.7102373,12.2340131 9.7102373,11.76973 9.42387841,11.4833712 Z" id="Shape"> </path> <path d="M1.61391844,3.67341115 C1.32794143,3.38705236 0.863658305,3.38705236 0.577299418,3.67341115 C0.290940531,3.95977004 0.290940531,4.42405317 0.577299418,4.71003017 C0.863658305,4.99638906 1.32794143,4.99638906 1.61391844,4.71003017 C1.90027723,4.42405317 1.90027723,3.95977004 1.61391844,3.67341115 Z" id="Shape"> </path> <path d="M4.24345612,6.30294893 C3.95709733,6.01659014 3.49319599,6.01659014 3.2068372,6.30294893 C2.92047831,6.58930772 2.92047831,7.05320907 3.2068372,7.33956795 C3.49319599,7.62592674 3.95709733,7.62592674 4.24345612,7.33956795 C4.52981501,7.05320907 4.52981501,6.58930772 4.24345612,6.30294893 Z" id="Shape"> </path> </g> <polygon id="Shape" fill="#FFD659" points="22.7701094 18.7782672 21.8583428 21.7369267 28.2872897 28.1658735 31.266567 27.2747248"> </polygon> <polygon id="Shape" fill="#FFBD54" points="26.1518164 26.0304002 29.1834019 25.1915597 31.266567 27.2747248 28.2872897 28.1658735"> </polygon> <path d="M40.271598,33.8926685 C39.8943679,33.7460527 39.4694114,33.9331405 39.3227957,34.3103706 L35.3061357,44.6483064 C35.15952,45.0259183 35.3466077,45.450493 35.7242196,45.5971087 C35.8112727,45.63109 35.9009984,45.647126 35.9895788,45.647126 C36.283192,45.647126 36.5603874,45.4695835 36.6730218,45.1794066 L40.6893,34.8414707 C40.8359157,34.4642407 40.648828,34.0392842 40.271598,33.8926685 Z" id="Shape" fill="#E62753"> </path> <path d="M49.3178645,37.4072459 C48.9406345,37.2606302 48.515678,37.447718 48.3690623,37.8249481 L44.3524023,48.1628839 C44.2057866,48.5404958 44.3928743,48.9650705 44.7704861,49.1116862 C44.8575393,49.1456674 44.947265,49.1617036 45.0354636,49.1617036 C45.3290768,49.1617036 45.6062722,48.9841611 45.7192885,48.6939841 L49.7355667,38.3560482 C49.8821824,37.9788182 49.6950946,37.5538616 49.3178645,37.4072459 Z" id="Shape" fill="#E62753"> </path> <path d="M49.0750323,40.0566379 L38.6622613,36.0109602 L39.5862458,33.6326547 C39.7210253,33.2859696 40.111237,33.1137724 40.4583039,33.248552 L49.6149141,36.8062742 C49.9615993,36.9410537 50.1337963,37.3312654 49.9990168,37.6783323 L49.0750323,40.0566379 Z" id="Shape" fill="#FF2C5C"> </path> <path d="M36.6676765,45.1717704 C36.1442125,46.5188023 34.7765628,46.8028703 33.4291489,46.2797882 C32.0821169,45.7563242 31.2650398,44.6234886 31.7885037,43.2760749 C32.3119677,41.9286611 33.6723631,41.7236282 35.0193951,42.2474739 C36.3668088,42.7705561 37.1907587,43.8243566 36.6676765,45.1717704 Z" id="Shape" fill="#FF2C5C"> </path> <path d="M45.7200521,48.6886387 C45.1962063,50.0375797 43.8266474,50.3224114 42.4777064,49.7981837 C41.1287654,49.2739562 40.3105427,48.1395933 40.8347704,46.7906523 C41.3589979,45.4413295 42.7209205,45.2362966 44.0698616,45.7605242 C45.4191844,46.2847517 46.2442797,47.3396977 45.7200521,48.6886387 Z" id="Shape" fill="#FF2C5C"> </path> </g> </g> </svg>