ГС сообщения в таплинке

Зарегаться в таймвебе с бонусом 200р: https://timeweb.com/ru/services/hosting?utm_source=cc26299&utm_medium=timeweb&utm_campaign=timeweb-bring-a-friend

Видео:

Код, который отвечает за местоположение гс-плеера

<div class="voice-message-inner">
</div>

Основной код. Если упретесь в ограничение по символам, скрипт с window.audio можете вытащить и вставить отдельным хтмл-блоком над этим блоком

 <link href="https://onthewaytothesun.ru/projects/web/getscript/voiceMessages.css" rel="stylesheet">
<style>wave {width:240px;}
:root {
  --wave-color: #199C68;
  --progress-color: #EB4C42;
}

</style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>
<script>
  window.audio = [
  
{url:"https://onthewaytothesun.ru/sound/sergey-sergeevich-prokof-ev-tanec-rycarey.mp3",
title:"Прокофьев",
avatar:"https://taplink.st/a/f/0/e/2/304d30.jpg",
},
{url:"https://onthewaytothesun.ru/sound/LIL%20BOODANG%20-%20LASER%20PIMP.mp3",
title:"Laser Pimp",
avatar:"https://taplink.st/a/f/0/e/2/304d30.jpg",
},
  
]
</script>
<script>
waveColor = window.getComputedStyle(document.body).getPropertyValue('--wave-color')
progressColor = window.getComputedStyle(document.body).getPropertyValue('--progress-color')
progressHeight = 40;
  
//дальше не трогать
const _0xb919c2=_0x5004;function _0x5004(_0x4179e7,_0xfa8210){const _0x542208=_0x5422();return _0x5004=function(_0x500481,_0x148605){_0x500481=_0x500481-0x113;let _0x210c60=_0x542208[_0x500481];return _0x210c60;},_0x5004(_0x4179e7,_0xfa8210);}(function(_0x1053f3,_0x2b4c7c){const _0x20aae2=_0x5004,_0x3c6648=_0x1053f3();while(!![]){try{const _0x46ead4=parseInt(_0x20aae2(0x13d))/0x1+parseInt(_0x20aae2(0x123))/0x2+parseInt(_0x20aae2(0x12b))/0x3+parseInt(_0x20aae2(0x11e))/0x4*(-parseInt(_0x20aae2(0x132))/0x5)+parseInt(_0x20aae2(0x12e))/0x6+parseInt(_0x20aae2(0x13c))/0x7*(parseInt(_0x20aae2(0x12f))/0x8)+-parseInt(_0x20aae2(0x131))/0x9*(parseInt(_0x20aae2(0x146))/0xa);if(_0x46ead4===_0x2b4c7c)break;else _0x3c6648['push'](_0x3c6648['shift']());}catch(_0x1de552){_0x3c6648['push'](_0x3c6648['shift']());}}}(_0x5422,0xd0145));const div=(_0xe1be23,_0x210cd6)=>(_0xe1be23-_0xe1be23%_0x210cd6)/_0x210cd6,mod=(_0x5e3368,_0x498e03)=>_0x5e3368%_0x498e03;class AudioMessage{constructor(_0x4e070a,_0x5306f0){const _0x404502=_0x5004;let _0xe329a2=this;this[_0x404502(0x161)]=_0x5306f0,this[_0x404502(0x11d)]=0x1,this[_0x404502(0x15e)]={},this[_0x404502(0x15e)]['container']=_0x4e070a,this[_0x404502(0x15e)]['playToggle']=_0x4e070a[_0x404502(0x127)](_0x404502(0x139)),this['elements'][_0x404502(0x13f)]=_0x4e070a[_0x404502(0x127)](_0x404502(0x115)),this[_0x404502(0x15e)][_0x404502(0x122)]=_0x4e070a[_0x404502(0x127)](_0x404502(0x134)),this[_0x404502(0x15e)][_0x404502(0x118)]=_0x4e070a[_0x404502(0x127)]('audio'),this[_0x404502(0x15e)][_0x404502(0x157)]=_0x4e070a['querySelector']('[data-speed-toggle]'),this[_0x404502(0x155)]=![],this['wavesurfer']=WaveSurfer['create']({'container':this[_0x404502(0x15e)][_0x404502(0x13f)],'waveColor':waveColor,'progressColor':progressColor,'barWidth':0x2,'barHeight':0x1,'barGap':0x2,'height':progressHeight,'cursorWidth':0x0,'barRadius':0x3}),this[_0x404502(0x135)][_0x404502(0x12d)](!![]),this[_0x404502(0x135)][_0x404502(0x148)](this[_0x404502(0x161)]),this[_0x404502(0x135)]['on'](_0x404502(0x137),()=>{const _0x381678=_0x404502;this[_0x381678(0x15e)]['container'][_0x381678(0x147)][_0x381678(0x14b)](_0x381678(0x151)),this['setTime'](this[_0x381678(0x135)][_0x381678(0x119)]()),this['elements'][_0x381678(0x133)]['addEventListener'](_0x381678(0x121),this[_0x381678(0x129)][_0x381678(0x154)](this)),this[_0x381678(0x15e)]['speedToggle'][_0x381678(0x138)](_0x381678(0x121),this[_0x381678(0x153)][_0x381678(0x154)](this)),this[_0x381678(0x135)]['on'](_0x381678(0x15b),()=>{const _0x271332=_0x381678;this['setTime'](this[_0x271332(0x135)][_0x271332(0x128)]());}),this[_0x381678(0x135)]['on'](_0x381678(0x150),()=>{const _0x424d0b=_0x381678;this['play'](),this[_0x424d0b(0x15e)][_0x424d0b(0x118)]['currentTime']=this[_0x424d0b(0x135)]['getCurrentTime']();}),this[_0x381678(0x135)]['on'](_0x381678(0x142),function(){const _0x4ace33=_0x381678;_0xe329a2[_0x4ace33(0x11b)]();});});}['audioTogglePlay'](){const _0xa1db7f=_0x5004;this['elements']['audio'][_0xa1db7f(0x15c)]?this['isPlaying']=![]:this['isPlaying']=!![],this['isPlaying']?this[_0xa1db7f(0x15e)]['audio'][_0xa1db7f(0x143)]():this[_0xa1db7f(0x15e)]['audio'][_0xa1db7f(0x12a)]();}['togglePlay'](){const _0x358a6f=_0x5004;let _0x3b7b6a=this;messages[_0x358a6f(0x149)](_0x7b44a9=>{const _0x5ea4d1=_0x358a6f;_0x3b7b6a[_0x5ea4d1(0x161)]!==_0x7b44a9[_0x5ea4d1(0x161)]&&_0x7b44a9[_0x5ea4d1(0x15e)][_0x5ea4d1(0x13e)][_0x5ea4d1(0x147)][_0x5ea4d1(0x126)](_0x5ea4d1(0x114))&&_0x7b44a9['elements'][_0x5ea4d1(0x133)][_0x5ea4d1(0x121)]();}),this[_0x358a6f(0x15e)][_0x358a6f(0x13e)][_0x358a6f(0x147)]['toggle'](_0x358a6f(0x114)),this['wavesurfer'][_0x358a6f(0x14e)](),this[_0x358a6f(0x11a)]();}[_0xb919c2(0x12a)](){const _0x34ddd9=_0xb919c2;this[_0x34ddd9(0x15e)][_0x34ddd9(0x13e)][_0x34ddd9(0x147)][_0x34ddd9(0x14b)](_0x34ddd9(0x114)),this['wavesurfer'][_0x34ddd9(0x12a)](),this['elements'][_0x34ddd9(0x118)][_0x34ddd9(0x12a)]();}[_0xb919c2(0x11b)](){const _0x4ee384=_0xb919c2;this['elements']['container'][_0x4ee384(0x147)]['remove'](_0x4ee384(0x114)),this[_0x4ee384(0x15e)]['audio'][_0x4ee384(0x143)]();}[_0xb919c2(0x153)](){const _0x54d221=_0xb919c2;this[_0x54d221(0x11d)]+=0.5,this['speed']>0x2&&(this[_0x54d221(0x11d)]=0.5),this[_0x54d221(0x135)][_0x54d221(0x145)](this[_0x54d221(0x11d)]),this[_0x54d221(0x116)]();}[_0xb919c2(0x125)](_0x2b7c89){const _0x1207e4=_0xb919c2,_0x1ac908=Math['trunc'](_0x2b7c89),_0x3712db=String(div(_0x1ac908,0x3c))[_0x1207e4(0x120)](0x2,'0'),_0xd97d6b=String(mod(_0x1ac908,0x3c))['padStart'](0x2,'0');this[_0x1207e4(0x15e)][_0x1207e4(0x122)][_0x1207e4(0x156)]=_0x3712db+':'+_0xd97d6b;}[_0xb919c2(0x116)](){const _0x1313c3=_0xb919c2;this[_0x1313c3(0x15e)]['speedToggle']['textContent']=this[_0x1313c3(0x11d)]+'x',this[_0x1313c3(0x15e)][_0x1313c3(0x118)][_0x1313c3(0x13a)]=this[_0x1313c3(0x11d)];}}function _0x5422(){const _0x42d6b8=['title','log','audioprocess','paused','$elements','elements','find','$container','audioLink','Код\x20плеера\x20гс\x20@onthewaytothesun','AudioMessage--active','[data-wave]','updateSpeed','append','audio','getDuration','audioTogglePlay','stop','init','speed','28pbKCGJ','push','padStart','click','time','1195864jyShvT','DOMContentLoaded','setTime','contains','querySelector','getCurrentTime','togglePlay','play','3573027mpTicq','data-index','setMute','7007394OgsWzD','6426856xpxBLn','each','63NInSeb','998120kcKmwi','playToggle','[data-time]','wavesurfer','\x22\x20class=\x22AudioMessage\x22\x20data-audio-message=\x22','ready','addEventListener','[data-play-toggle]','playbackRate','avatar','14LxKdfy','109164pSIGEa','container','wave','\x22>\x0a\x20\x20\x20\x20<button\x20\x0a\x20\x20\x20\x20\x20\x20type=\x22button\x22\x20\x0a\x20\x20\x20\x20\x20\x20class=\x22AudioMessage__playToggle\x22\x20\x0a\x20\x20\x20\x20\x20\x20data-play-toggle\x0a\x20\x20\x20\x20></button>\x0a\x20\x20\x20\x20<audio\x20class=\x22hidden\x22\x20src=\x22','\x22></audio>\x0a\x20\x20\x20\x20<div\x20class=\x22AudioMessage__wave\x22\x20data-wave></div>\x0a\x20\x20\x20\x20<div\x20class=\x22AudioMessage__info\x22>\x0a\x20\x20\x20\x20\x20\x20<span\x20class=\x22AudioMessage__time\x22\x20data-time>00:00</span>\x0a\x20\x20\x20\x20\x20\x20<button\x20class=\x22AudioMessage__speedToggle\x22\x20type=\x22button\x22\x20data-speed-toggle>1x</button>\x0a\x20\x20\x20\x20</div>\x0a\x20\x20</div>\x0a\x20\x20</div>\x0a','finish','pause','.AudioMessage','setPlaybackRate','3461510hPglBu','classList','load','forEach','getAttribute','add','voiceMessageContainer','url','playPause','\x22>\x0a<div\x20id=\x22voice-','seek','rendered','html','toggleSpeed','bind','isPlaying','textContent','speedToggle','attr'];_0x5422=function(){return _0x42d6b8;};return _0x5422();}const messages=[];class voiceMessages{constructor(_0x22da14){const _0x5597ba=_0xb919c2;let _0x2d7498=this;_0x2d7498[_0x5597ba(0x160)]=_0x22da14;}[_0xb919c2(0x11c)](){const _0x21f714=_0xb919c2;let _0x128e88=this;_0x128e88['voiceMessageContainer']=$('<div\x20class=\x22voice-messages\x22></div>'),_0x128e88[_0x21f714(0x160)][_0x21f714(0x152)](_0x128e88['voiceMessageContainer']);let _0x8d7d39=window[_0x21f714(0x118)][_0x128e88[_0x21f714(0x160)][_0x21f714(0x158)](_0x21f714(0x12c))*0x1],_0x192a67=_0x8d7d39[_0x21f714(0x13b)];_0x192a67==undefined&&(_0x192a67=window[_0x21f714(0x118)][0x0]['avatar']);_0x128e88[_0x21f714(0x14c)]['$elements']=$('\x0a<div\x20class=\x22voice-messge-wrapper\x22>\x0a<p\x20class=\x22voice-title\x22>'+_0x8d7d39[_0x21f714(0x159)]+'</p>\x0a<img\x20src=\x22'+_0x8d7d39[_0x21f714(0x13b)]+_0x21f714(0x14f)+_0x128e88['$container']['attr'](_0x21f714(0x12c))*0x1+_0x21f714(0x136)+_0x8d7d39['url']+_0x21f714(0x140)+_0x8d7d39[_0x21f714(0x14d)]+_0x21f714(0x141)),_0x128e88[_0x21f714(0x14c)][_0x21f714(0x117)](_0x128e88['voiceMessageContainer'][_0x21f714(0x15d)]);let _0x5b88d3=_0x128e88['voiceMessageContainer'][_0x21f714(0x15d)][_0x21f714(0x15f)]($(_0x21f714(0x144)));messages[_0x21f714(0x11f)](new AudioMessage(_0x5b88d3[0x0],_0x5b88d3[0x0][_0x21f714(0x14a)]('data-audio-message')));}}document[_0xb919c2(0x138)](_0xb919c2(0x124),()=>{setTimeout(()=>{const _0x32669c=_0x5004;console[_0x32669c(0x15a)](_0x32669c(0x113)),$('.voice-message-inner')[_0x32669c(0x130)](function(_0x1702b1){const _0x41b608=_0x32669c;$(this)['attr']('data-index',_0x1702b1);let _0x367f4f=new voiceMessages($(this))[_0x41b608(0x11c)]();});});});
</script>